文明校园建设专题网站,目前最好用的云电脑排行,pmp,万维定制平台计算属性VS监视属性#xff08;侦听属性#xff09;
computed和watch之间的区别#xff1a; 1.computed能完成的功能#xff0c;watch都可以完成。 2.watch能完成的功能#xff0c;computed不一定能完成#xff0c;例如#xff1a;watch可以进行异步操作。 两个重要的小…计算属性VS监视属性侦听属性
computed和watch之间的区别 1.computed能完成的功能watch都可以完成。 2.watch能完成的功能computed不一定能完成例如watch可以进行异步操作。 两个重要的小原则 1.所被Vue管理的函数最好写成普通函数这样this的指向才是vm 或 组件实例对象。 2.所有不被Vue所管理的函数定时器的回调函数、ajax的回调函数等、Promise的回调函数最好写成箭头函数这样this的指向才是vm 或 组件实例对象。
监视属性实现
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title姓名案例_watch实现/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- computed和watch之间的区别1.computed能完成的功能watch都可以完成。2.watch能完成的功能computed不一定能完成例如watch可以进行异步操作。两个重要的小原则1.所被Vue管理的函数最好写成普通函数这样this的指向才是vm 或 组件实例对象。2.所有不被Vue所管理的函数定时器的回调函数、ajax的回调函数等、Promise的回调函数最好写成箭头函数这样this的指向才是vm 或 组件实例对象。--!-- 准备好一个容器--div idroot姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/全名span{{fullName}}/span br/br//div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{firstName:张,lastName:三,fullName:张-三},watch:{firstName(val){setTimeout((){console.log(this)this.fullName val - this.lastName},1000);},lastName(val){this.fullName this.firstName - val}}})/script
/html计算属性实现
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title姓名案例_计算属性实现/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/全名span{{fullName}}/span br/br//div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{firstName:张,lastName:三,},computed:{//完整写法/* 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}}})/script
/html区别
用计算属性实现上述功能比较简单。但是如果想要实现当姓改变时延迟一秒在改变姓名的值则必须使用监视属性的写法。 如果用计算属性以下写法是错误的
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title姓名案例_计算属性实现/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 准备好一个容器--div idroot姓input typetext v-modelfirstName br/br/名input typetext v-modellastName br/br/全名span{{fullName}}/span br/br//div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{firstName:张,lastName:三,},computed:{//完整写法/* 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(){//错误写法 注意 注意 注意因为fullName没有return了console.log(get被调用了)setTimeout((){return this.firstName - this.lastName},1000); }}})/script
/html
