Vue 基本特性
1. 实例及选项
Vue是通过new Vue({})来声明一个实例的，在这个实例中包含了当前页面的html结构，数据和事件。Vue的实例是MVVM 模式中的ViewModel，实现了数据和视图的双向绑定；在实例化的时候可以传入一个选项对象，它包含数据、模板、 挂载元素、方法、生命周期钩子函数等选项
1.1 数据
data：在Vue实例中初始化的data中的所有数据会自动进行监听绑定，然后可以在View中使用{{}}来绑定data中的数据
data中的数据都是浅拷贝，对原来对象的修改也会改变data，从而触发更新事件
在组件的使用过程中也可以使用data
- 组件中data的值必须是一个函数，并且返回值是原始对象；如果传给组件的data是一个原始对象，则在建立多个组件实例时，它们会共用这个data对象，修改其中一个组件实例的数据也会影响到其他组件实例的数据
- data中的属性和props中的不能重名
1.2 方法
methods：通过methods对象定义方法，并使用v-on指令来监听DOM事件
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
1.3 模板
选项中主要影响模板或DOM的有el和template，属性replace和template需要一起使用
（1）el(类型为字符串、DOM元素或函数)：为实例提供挂载函数，通过css选择器来选择绑定的元素
（2）template（类型为字符串）：默认会将其指替换挂载元素，并合并挂载元素和模板根节点的属性
1.4 watch函数
Vue提供一种通用的方式来观察和响应Vue实例上的数据变动，那就是watch属性；
watch属性是一个对象，它有两个属性：一个是键，另一个是值。键是需要观察的表达式，值是对应的回调函数，回调函数得到的参数为新指和旧值。值也可以是方法名，或者包含选项的对象。Vue实例会在实例化的时候调用$watch()，遍历watch对象的每一个属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>watch函数 demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <button @click="a--">点击使 a-1</button> <p>{{message}}</p> </div> <script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ a:3, message:"" }, watch:{ a:function (val,oldval){ this.message='旧值为:'+oldval+',新值为:'+val; } } }) </script> </body> </html>
2. 模板渲染
DOM所有的逻辑应尽可能在状态的层面去进行，当状态改变时，View应该是在框架的帮助下自动更新到合理状态，而不是开发者观测到数据变化后手动选择元素去进行更新。
2.1 条件渲染
条件渲染分为v-if和v-show两种，区别在之前已经说过了，下面来看看具体的实现。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <template v-if="yes"> <h2>Vue</h2> <p>v-if demo</p> </template> <button @click="yes=!yes">点击使上面内容消失(展示)</button> </div> <script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ yes:true } }) </script> </body> </html>
v-show使用起来大致一样，可以看看昨天的例子
2.2 列表渲染
列表渲染：用v-for指令根据一组数据的选项列表进行渲染。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-for demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <ul> <li v-for="item in items">{{item.text}}</li> </ul> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ items:[ {text:"name"}, {text:"age"}, {text:"sex"} ] } }) </script> </body> </html>
渲染之后就是
- 标签当v-for与v-if一起使用时，v-for比v-if有更高的优先级，所以v-if分别重复运用在每一次循环中。2.3 前后端渲染对比以前学java web开发，当时还是学jsp等等，通过模板引擎将数据加载到html页面进行渲染，而现在大部分都是前后端分离，那各自有什么优点呢？前端渲染优点：
- 业务分离：后端只需要提供接口，前端开发不需要部署后端环境，只需要通过接口获取后端传来的数据
- 计算量转移：原本后端渲染的任务转移给了前端，服务器压力减小
- 总结来说，前端渲染最大的优点就是前后端的业务分离，前端工程师可以专心在前端业务逻辑中，提高了项目开发效率，毕竟现在项目尽快开发上线才是最关键的。
后端渲染优点：
- 对浏览器要求少，不会有那么多限制（例如js限制）
- 考虑seo，对搜索引擎友好
- 静态资源多，所以首页加载很快，后端渲染加载完成就直接显示HTML页面了，少去了前端渲染时js渲染的时间
- 3. extend的用法
extend：局部注册时应用。extend创建的是一个组件构造器，而不是一个具体的组件实例，所以需要通过Vue.components()注册才能使用。因为这涉及到组件的内容，所以放在后面一起。
补充
Vue响应式原理
当创建一个Vue实例时，Vue会遍历data选项的属性，用Object.definePropery将它们转为getter/setter,并且在内部追踪相关依赖，在属性被访问或修改时通知变化。每个组件实例都有相应的watcher实例，它会在组件渲染的过程中把属性记录为依赖，然后当依赖项的setter被调用时，会通知watcher重新计算，从而使得相关联的组件得以更新。
