当前位置: 首页 > Web前端 > vue.js

Vue中data、methods、computed、watch、directives的注意点

时间:2023-03-31 19:47:51 vue.js

1.data1.1将在Vue实例外声明的属性赋值给data中的属性,且两者变量名相同时,data中的属性可以简写,如:varitems=[1,2,3];给data中的item赋值时,可以这样写:data(){return{items,//这里的简写是es6msg中的语法:"如何获取data中的外部数据"}}1.2有两种方式获取Vue实例外的data属性,方法一:varmsg=vm(Vueinstancename).$data.msg;方法二:varmsg=vm.msg;而Vue在实例中获取data中的变量的方式是this.msg,data中的变量不能相互引用。2.methods2.1函数没有缓存,每次调用都会重新执行。它只支持单项绑定。输入框v-model绑定函数时,输入框的值不能修改。2.2函数传入当前对象有两种情况。情况一:当只传入元素本身时,sayhi方法:{say:function(event){console.log(e.当前目标);}}或sayhi方法:{say:function(event){console.log(e.currentTarget);}}看函数后面有没有()括号。情况二:当需要传入参数或者传入参数和元素本身时sayhi方法:{say:function(消息,e){警报(消息);控制台日志(e.currentTarget);}}3.computed3.1computed有缓存,只有当绑定变量改变时才会被调用。3.2双向绑定使用computed时get函数和set函数的用法:sum:{get:function(){callconsole.log("calculatedpropertyexecution");return(this.englishScore-0)+当绑定数据改变时(this.mathScore-0);},set:function(newValue){计算属性改变时调用letequalVal=newValue/2;this.englishScore=equalVal;this.mathScore=equalVal;}}当get函数中监控的变量englishScore或mathScore变化时调用get函数。因为有缓存,第一次调用get函数时会执行console.log("Computedpropertyexecution"),再次执行get函数时不会执行console.log("Computedpropertyexecution").当sum的值发生变化时,执行set函数。set函数中传入的参数是sum的变化值,相关属性可以在set函数中进行操作。4.watch4.1当watch中的监控对象为对象数组时,一般只会监控数组中对象个数的变化。如果数组中某个对象的属性发生变化,需要使用深度监控:lists:{handler:function(newValue,oldValue){//回调函数//当数组发生变化时,将数据保存到本地itemStorage.save(新值);},deep:true}lists是要监控的对象数组,handler是监控对象发生变化时执行的操作。此时deep:true执行深度监控。回调函数handler中的第一个参数:function(newValue,oldValue)是被监控对象的变化值,第二个参数是变化前的值。5.directive5.1全局指令全局指令可以在Vue管理的多个交集下使用。定义指令名时不能加“v-”,但在元素上调用指令时需要加“v-”。Vue.directive("指令名",{bind:function(el,binding){el.style.color=binding.value.输入对象属性名;}inserted:function(el,binding){//会传入el.innerHTML=binding.value.toUpperCase();}})一般style的操作都在bind中,bind函数只初始化一次。一般交互js的操作都是在inserted中,inserted只调用一次。注意:在v-commandname=""中,使用自定义命令传入的数据需要从binding.value中获取。另外,传入自定义命令的值需要指定对象类型,如:传入字符串类型v-commandname="'stringcontent'"等。..