Summer's 博客

根据平时开发工作，对vue的部分知识点做一个小总结。

对比ReactJS vs. VueJS

ReactJS

ReactJS本身不是一个框架，而是表示层，包含模板语言和一些用于处理HTML的函数。生成的代码是一个HTML文档，包含用于存储内部存储器状态的HTML/JavaScript连接器组件。

ReactJS在开发中非常有用，但是仅仅使用React构建完整的应用程序是非常困难的。

对于大部分开发人员来说，最重要最有价值的React功能是构建大型Web附加组件的可能性，这些组件不需要重新加载页面就可以进行更新。ReactJS主要目标是应用程序中的用户界面处理。

ReactJS优点

React在浏览器中呈现DOM，并实时对其进行可视化更新。
React拥有一个独立的产品React Native，可以开发跨平台应用。大部分代码都是使用React编写的，并且必要时可以快速的添加特定平台的包。

ReactJS缺点

缺乏完整的框架功能（没有内置的状态管理系统，没有内置的数据库查询工具等）
文档和手册对新手开发者来说太复杂了

总结

总的来说，ReactJS是一款非常好的工具，配备了许多对于开发高质量应用程序界面至关重要的功能。主要优点是即时显示状态变更，以及与React相关的元素的高渲染速度和熟练地操作。缺点就是ReactJS定位为表现层。

React本身虽然不是一个完整的框架，但是可以借助Redux协助。Redux是一个可预测的JavaScript应用程序状态管理器。通过引入简单和可预测的状态模型，强调函数式编程，不变数据和紧凑API来解决许多不同的问题。

因为React广受欢迎，拥有了广泛兼容插件、库、框架的生态系统。

VueJS

不是完全意义上的框架，是MVVM模板层。

VueJS优点

易于开发。
双向数据绑定。大大简化并加速了HTML块的处理。
控制状态的能力。允许实时监控界面的开发。通过props()和data()来执行。
遵循人的思维过程。而不是面向机器的思维方式。

VueJS缺点

社区不够活跃
组件必须预先定义，不能通过prop传递动态结构。

总结

强大快速简单。容易上手。

对比React与Vue

在数据变更时，React重写浏览器DOM的整个结构，而Vue直接更新单个节点，使其与其他的DOM操作工具（如JQuery）更加兼容。所以，相对来说，React不那么灵活，在执行效率也会低一些。

性能：VueJS更有优势。Vue有用处理更高帧速率的能力-每秒10帧，而React的典型速度是每秒1帧。
可伸缩性：Vue使用template模板语法，React使用JavaScript编写DOM（jsx扩展）。如果项目比较复杂，Vue模板语法很难重用，React则更好一些。
学习曲线：Vue模板简单易懂。React需要学习JSX（JavaScript语法的扩展），不够直观。

Object.defineProperty

Object.defineProperty()可以直接在一个对象上定义一个新属性，或者修改一个存在的属性，并返回这个对象。

如：

let Woman = Object.defineProperty({},'name',{
    value:'Nini'
});
console.log(Woman.name);//Nini

// 以上相当于
// (1)
Woman.name = 'Nini';
// (2)
Woman['name'] = 'Nini'; 

基本语法：

Object.defineProperty(obj,prop,descriptor);

obj - 需要定义属性的对象

prop - 需要定义或修改的属性名

descriptor - 将被定义或修改的属性的值

基本概念

数据驱动

在Vue.js中，DOM的状态是数据状态的反映，通过创建“ViewModel”对象将DOM和数据连接起来。更改数据时，DOM会自动更新。

组件

页面可能庞大而且复杂，希望可以将其分离成多个小的单元，以便理解和维护。在Vue.js中，通过组件实现这点。

虚拟DOM渲染过程

Virtual DOM是一个表示文档对象模型（DOM）的JavaScript对象。虚拟DOM最大限度的降低了真实DOM的更新成本。

VueJS生命周期

通过一个简单的Vue实例理解生命周期的钩子：

<div id="app">
  <h1></h1>
</div>

var vm = new Vue({
	el: '#app',
	data: {
		message: 'Hello World!'
	},
	beforeCreate: function() {
		console.log("beforeCreate");
	},
	created: function() {
		console.log("created");
	},
	beforeMount: function() {
		console.log("beforeMount");
	},
	mounted: function() {
		console.log("mounted");
	},
	beforeUpdate: function() {
		console.log("beforeUpdate");
	},
	updated: function() {
		console.log("updated");
	},
	beforeDestroy: function() {
		console.log("beforeDestroy");
	},
	destroyed: function() {
		console.log("destroyed");
	}
});

如图：

VueJs组件

将复杂的页面拆分成多个小单元，再将组件组装在一起。

全局注册组件

Vue.component(tagName, options);

例如：

...
<body>
    <div id="app">
        <greeting></greeting>
    </div>

    <script>
        Vue.component('greeting', {
            template: '<h1>Welcome to here!</h1>'
        });

        // 创建实例
        var vm = new Vue({
            el: '#app'
        });
    </script>
</body>
...

使用

例如：

...
<body>
    <div id="app">
        <greeting :title="title" :login="login" :reg="reg"></greeting>
    </div>

    <template id="greeting-template">
        <h1></h1>
        <button></button>
        <button></button>
    </template>

    <script>
        Vue.component('greeting', {
            template: '#greeting-template',
            props:['title','login','reg']
        });

        // 创建实例
        var vm = new Vue({
            el: '#app',
            data:{
                title:'Welcome to here!',
                login:'登录',
                reg:'注册'
            }
        });
    </script>
</body>
...

局部注册

如果组件不需要共用，可以使用局部注册。

var Prompt = {
  template: `<div><p>${ message }</p><button @click="sayHi">Say Hi!</button></div>`,
  data: function () {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    sayHi: function() {
      alert('Hi');
    }
  }
};

var vm = new Vue({
  el: '#app',
  components: {
    'prompt-component': Prompt
  }
});

…End!