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重新计算,从而使得相关联的组件得以更新。