vue.js的简单总结

这篇文章主要对vue的理解进行总结：

参考来源　　1.轻量级的框架

　　2.双向数据绑定

　　3.指令

　　4.插件化

Vue目前的的开发模式主要有两种：
1.直接页面级的开发，script直接引入Vue
2.工程性开发，webpack+loader或者直接使用脚手架工具Vue-cli，里面的文件都配置好了

webpack可以进行配置，配置多文件入口，进行多页面开发

渲染流程大概分以下几个步骤：

1. new Vue，执行初始化
2. 挂载$mount方法，通过自定义Render方法、template、el等生成Render函数
3. 通过Watcher监听数据的变化
4. 当数据发生变化时，Render函数执行生成VNode对象
5. 通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素

下面说一说vue的渲染模式有三种：

1、自定义的render函数

1.Vue.component('anchored-heading', {2. render: function (createElement) {3.  return createElement(4.   'h' + this.level, // tag name 标签名称5.   this.$slots.default // 子组件中的阵列6.  )7. },8. props: {9.  level: {10.   type: Number,11.   required: true12.  }13. }14.})

2、 template写法

1.var vm = new Vue({2. data: {3.  // 以一个空值声明 `msg`4.  msg: ''5. },6. template: '<div>{{msg}}</div>'7.})

3、el写法

1.var app = new Vue({2. el: '#app',3. data: {4.  message: 'Hello Vue!'5. }6.})

这三种渲染模式最终都是要得到Render函数。只不过用户自定义的Render函数省去了程序分析的过程，等同于处理过的Render函数，而普通的template或者el只是字符串，需要解析成AST，再将AST转化为Render函数。

记住一点，无论哪种方法，都要得到Render函数。

我们在使用过程中具体要使用哪种调用方式，要根据具体的需求来。

• 如果是比较简单的逻辑，使用template和el比较好，因为这两种都属于声明式渲染，对用户理解比较容易，但灵活性比较差，因为最终生成的Render函数是由程序通过AST解析优化得到的；

• 而使用自定义Render函数相当于人已经将逻辑翻译给程序，能够胜任复杂的逻辑，灵活性高，但对于用户的理解相对差点。 

生命周期：

beforeCreate（创建前）

created（创建后）

beforeMount(载入前)

mounted（载入后）

beforeUpdate（更新前）

updated（更新后）

beforeDestroy（销毁前）

destroyed（销毁后）

原标题：vue.js的简单总结

关键词：JS