Vue核心知识——computed和watch的细节全面分析
2019-08-14 10:18:41来源:博客园 阅读 ()
computed和watch的区别
computed特性
1.是计算值,
2.应用:就是简化tempalte里面{{}}计算和处理props或$emit的传值,computed(数据联动)。
3.具有缓存性,页面重新渲染值不变化,计算属性会立即返回之前的计算结果,而不必再次执行函数
watch特性
1.是观察的动作,
2.应用:监听props,$emit或本组件的值执行异步操作,watch(异步场景)。
3.无缓存性,页面重新渲染时值不变化也会执行
注:watch:一般监听单个变量或者一个数组或对象,computed: 监听在同一个实例里的很多个变量。
watch 并不适用于显示某一个数据以及数据的拼装等。watch 用在监听数据变化,做某些指令操作(给后台发数据请求)
一、computed
定义:是一个计算属性,类似于过滤器,对绑定到view的数据进行处理
实现进行简单的字符串拼接
1.不适用computed的用法
new Vue({ el: '#app', template:"<p>{{firstName +' '+ lastName}}</p>", data: { firstName: 'lucas', lastName: 'Root' }, }) /*lucas Root*/
2.使用computed
new Vue({ el: '#app', template:"<p>{{fullName}}</p>", data: { firstName: 'lucas', lastName: 'Root' }, computed:{ fullName(){ return `${this.firstName} ${this.lastName}`; } } })
3.使用methods方法
methods方法实现和computed相同拼接
let vm = new Vue({ el: '#app', template:` <div> <p>computed:{{fullName}}</p> <p>methods:{{names()}}</p> </div> `, data: { firstName: 'lucas', lastName: 'Root' }, computed:{ fullName(){ return `${this.firstName} ${this.lastName}`; } }, methods:{ names() { return `${this.firstName} ${this.lastName}`; } } }) /* computed:lucas Root methods:lucas Root */
注:computed属性的fullName不可在data里定义,否则会报错。
4.使用computed的好处
当我们改变data变量值时,整个应用会重新渲染,vue 会被数据重新渲染到 dom 中。这时,如果我们使用 names方法,随着渲染,方法也会被调用,而 computed 不会重新进行计算,从而性能开销比较小。当新的值需要大量计算才能得到,缓存的意义就非常大。
如果 computed 所依赖的数据发生改变时,计算属性才会重新计算,并进行缓存;当改变其他数据时,computed 属性 并不会重新计算,从而提升性能。
当我们拿到的值需要进行一定处理使用时,就可以使用 computed。
5.computed的get与set用法
let vm = new Vue({ el: '#app', template:` <div> <p>computed:{{fullName}}</p> </div> `, data: { firstName: 'lucas', lastName: 'Root' }, computed:{ fullName:{ /*若使用方法写法fullName()会报错,需使用属性写法*/ get() { //回调函数 当需要读取当前属性值是执行,根据相关数据计算并返回当前属性的值 return `${this.firstName} ${this.lastName}`; }, set(val) { //监视当前属性值的变化,当属性值发生变化时执行,更新相关的属性数据,val就是fullName的最新属性值 const names = val.split(' '); console.log(names); this.firstName = names[0]; this.lastName = names[1]; } } }, }) vm.fullName="hello world"; //也可以在浏览器控制台修改输出 /* computed:hello world */
二、watch
定义:watch是一个观察的动作,例如,监听 firstName 数据,并根据改变得到的新值,进行某些操作。
2.1示例
let vm = new Vue({ el: '#app', template:` <div> <p>computed:{{fullName}}</p> </div> `, data: { firstName: 'Lucas', lastName: 'Root', fullName:'names', }, watch:{ firstName (newName1,oldName1){ console.log('this firstName newName '+newName1); console.log('this firstName oldName '+oldName1); this.fullName = newName1 + ' ' + this.lastName; }, }, }) // vm.firstName="hello"; /* this firstName newName hello this firstName oldName Lucas */
上面是监听firstName和lastName的变化,但是仅限简单数据类型
注:watch:一般监听单个变量或者一个数组,computed: 监听在同一个实例里的很多个变量。
2.2监听简单数据类型
data(){ return{ 'first':2 } }, watch:{ first(){ console.log(this.first) } },
2.3 监听复杂数据类型
1.深度监听deep
不使用 deep 时,当我们改变 obj.a 的值时,watch不能监听到数据变化,默认情况下,handler 只监听属性引用的变化,也就是只监听了一层,但改对象内部的属性是监听不到的。
let vm = new Vue({ el:'#app', template: ` <div> <p>Obj.a: <input type="text" v-model="obj.a"/></p> </div> `, data: { obj: { a: '123' } }, watch: { obj: { handler () { console.log('obj.a changed') }, // immediate: true deep: true } } })
immerdiate 属性:通过声明 immediate 选项为 true,可以立即执行一次 handler。
通过使用 deep: true 进行深入观察,这时,我们监听 obj,会把 obj 下面的属性层层遍历,都加上监听事件,这样做,性能开销也会变大,只要修改 obj 中任意属性值,都会触发 handler,那么如何优化性能呢?请看下面2.4监听对象单个属性
watch: { 'obj.a': { //监听对象单个属性a handler () { console.log('obj.a changed') }, immediate: true //该属性会先执行一次handler // deep: true } }
2.4监听对象单个属性
方法一:可以直接对用对象.属性的方法拿到属性
let vm=new Vue({ el:'#app', template: ` <div> <p>Obj.Number: <input type="text" v-model="first.number"/></p> </div> `, data(){ return{ first:{ number:5, } } }, watch:{ 'first.number':function(newVal,oldVal){ //监听单个属性number console.log(newVal,oldVal); } }, })
vm.$watch的深度监听
部分资料来源
原文链接:https://www.cnblogs.com/jing-tian/p/11247546.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- vue.js开发环境搭建教程 2020-03-16
- Vue input控件通过value绑定动态属性及修饰符的方法 2020-03-05
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- vue路由跳转时判断用户是否登录功能的实现 2020-01-17
- vue-cli中打包图片路径错误的解决方法 2020-01-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash