vue中的计算属性与监视属性的区别 | 您所在的位置:网站首页 › Vue中的计算属性和普通属性有什么区别 › vue中的计算属性与监视属性的区别 |
1.计算属性 computed
在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算的结果 定义:要用的属性不存在,要通过已有属性计算得来。 原理:底层借助了Objcet.defineproperty方法提供的getter和setter。 get函数什么时候执行? (1). 初次读取时会执行一次。 (2). 当依赖的数据发生改变时会被再次调用。 优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。 备注: 1.计算属性最终会出现在vm上,直接读取使用即可。 2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。 //完整写法 fullName:{ get(){ console.log('get被调用了') return this.firstName + '-' + this.lastName }, set(value){ console.log('set',value) const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } //简写 fullName(){ console.log('get被调用了') return this.firstName + '-' + this.lastName } 2.监视属性 watch通过通过vm对象的$watch()或watch配置来监视指定的属性 当属性变化时, 回调函数自动调用, 在函数内部进行计算 当被监视的属性变化时, 回调函数自动调用, 进行相关操作 监视的属性必须存在,才能进行监视!! 监视的两种写法: (1). new Vue时传入watch配置 (2). 通过vm.$watch监视 watch:{ isHot:{ immediate:true, //初始化时让handler调用一下 //handler什么时候调用?当isHot发生改变时。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } } } vm.$watch('isHot',{ immediate:true, //初始化时让handler调用一下 //handler什么时候调用?当isHot发生改变时。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } })深度监视: (1). Vue中的watch默认不监测对象内部值的改变(一层)。 (2). 配置deep:true可以监测对象内部值改变(多层)。 备注: (1). Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以! (2). 使用watch时根据数据的具体结构,决定是否采用深度监视。 numbers:{ deep:true, handler(){ console.log('numbers改变了') } }简写 //正常写法 isHot:{ // immediate:true, //初始化时让handler调用一下 // deep:true,//深度监视 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } } //简写 isHot(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue,this) } 3.计算属性与监视属性的区别computed和watch之间的区别: computed能完成的功能,watch都可以完成。 watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。 两个重要的小原则: 所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。 例子: 姓: 名: 姓名1(单向): 姓名2(单向): 姓名3(双向):{{fullName1}} {{fullName1}} {{fullName1}} const vm = new Vue({ el: '#demo', data: { firstName: 'A ' , lastName: 'B' , fullName2: 'A B' }, computed: { // 什么时候执行:初始化显示 / 相关的data属性数据发生改变 // 做什么的: 计算并返回当前属性的值 fullName1() { //计算属性中的一个方法,方法的返回值作为属性 (回调函数) console.log('fullName1()') // 必然会掉用 return this.firstName + ' ' + this.lastName; }, fullName3: { //不是函数是一个对象,里面有两个方法 get() { // 回调函数 : 1. 你定义的 2. 你没有调用 3. 但他最终执行了 // 1. 什么时候调用? 2. 用来做什么 // 回调函数 当需要读取当前属性值时回调 根据相关的数据计算并返回当前属性的值 return this.firstName + ' ' + this.lastName; }, set(value) { // 回调函数 监视当前属性值的变化 当属性值发生改变时回调 更新相关的属性数据 const names = value.split(' '); this.firstName = names[0]; this.lastName = names[1]; } } }, watch: { //配置监视 firstName: function(value){ // firstName 发生了变化 console.log(this); //就是vm对象 this.fullName2 = value + ' ' + this.lastName; } } }); vm.$watch('lastName', function(value) { //更新fullName2 this.fullName2 = this.firstName + ' ' + value; }) |
CopyRight 2018-2019 实验室设备网 版权所有 |