解释vue计算属性的使用计算 事件和监听器观察

1.计算属性(计算)

模板div class=' box计算属性/h1 hr！-直接呈现数据-pin put type=' text ' v-model=' message '/p！-简单操作数据的一个缺点是后期对页面数据的维护不太方便-p {{message。touppercase ()}}/p！-通过计算属性更改画面来渲染-p { {计算消息}}/p HR！-通过事件更改属性-span { { message } }/span button @ click=' change message()'单击更改/button HR/div/templatescriptordefault { data(){ return { message : ' hello world！'，passw2:' SSS '，}}，则//computed属性是返回值，只有函数名不是调用函数computed 3360 { computed message(){ return this。message . split(“”)} }。methods : { change message(){ this。消息=这个。computedmessage' Altman'}}，}/script这里需要注意的是，computed中的函数名不能与被操作数据中的数据相同；computed中的函数名等同于操作数据后的新数据。在模块中直接使用这个函数名可以在数据中呈现数据变化。

二.听众(手表)

首先，确保手表是一个对象，并将其用作对象。

对象有键和值。

第一个关键是你要监控的数据，比如$route，就是监控路由的变化。或者数据中的变量。

一个值可以是一个函数：当你监视的对象改变时需要执行的函数。这个函数有两个形式参数，第一个是变化后的新值，第二个是变化前的值。

第二个值也可以是函数名：但是，这个函数名应该用单引号括起来。(不常用)

第三种情况很可怕(被监控的数据值是一个对象):

值是包含选项的对象：有三个选项。

第一个处理程序：它的值是一个回调函数。也就是说，当听到变化时应该执行的功能。第二深：它的价值是真还是假；确认是否深入倾听。(一般听不到对象属性值的变化，但可以听到数组值的变化。)第三个是即时的：它的值是真还是假；确认是否用当前初始值执行处理程序的功能。用法1:基本用法

template div class=' box ' h1 listener/h1 label secondary password :/labe input v-model=' watchmark SG '/div/templatescriptexportdefault { data(){ return { message : ' hello world！'，watchMsg: '我是监听操作'，}}，watch : { watch SG(new val，old val){ console . log '(new val 3360 ' new val，' old val 3360 ' old val)；}，} }/脚本用法2:处理程序方法和立即属性

template div class=' box ' h1 listener/h1 label secondary password :/labe input v-model=' watchmark SG '/div/templatescriptexportdefault { data(){ return { message : ' hello world！'，watchMsg: '我是监听操作'，}}，watch : { Watchers g 3360 { handler(new val，old val){ console . log(' new val : ' new val，' old val 3360 ' old val)；}，immediate:true，} } } }/脚本注意到处理程序了吗？我们将一个处理程序方法绑定到了ChacksG。默认情况下，我们之前编写的watch方法实际上编写了这个处理程序。Vue.js会处理这个逻辑，最后编译出来的其实就是这个处理程序。

而immediate:true意味着，如果在wacth中声明了watchMsg，那么里面的处理程序方法将会被立即执行。如果是假的，会和之前一样的效果，绑定的时候不会执行。

用法3:

深层属性

手表里还有一个属性deep，默认值是false，表示是否深度聆听。例如，我们在数据中有一个obj属性/数组：

模板div class='box' h1监听器/h1标签二次密码：/标签输入v-model=' obj。守望者/div/templatescript导出默认{ data(){返回{ message : ' Hello world！'，obj: { watchMsg: '我是监听操作，} } }，watch:{ //需要注意的是这里的监听对象也需要变化物体。Watchings ' : { handler(NewVal，old Val){ console。日志(' NewVal : ' NewVal，' old Val : ' old Val)；}，immediate:true，deep:true，} }}/script2，数组的看

模板div class='box' h1监听器/h1 p{{array}}/p按钮@click='addArray()'点击改变数组/button/div/templatescriptexport默认{ data(){返回{ message : ' Hello world！'，array:['mu '，' zi '，' dig '，' big'] }，watch:{ //需要注意的是这里所监听的对象应该是数组array:{ handler(newVal，oldVal){ console。log(NewVal '-' oldVal)}，deep:true，immediate:true，}，methods : { addArray(){ this。数组。push(' 66 ')} } }/script 3，数组中对象的看

模板div class='box' h1监听器/h1 ul Li v-for=' Arrayobj ' : key=' item。id“{ index } }-{ { item。姓名} }-输入类型=' text ' v-model=' item。age ' @ key down=' change(index)'/Li/ul HR ul Li v-for=' Arrayobj ' : key=' item。id“{ index } }-{ { item。名称} }-{ { item。age } } { { item。年龄} }张三，年龄：'23'},姓名： '李四，age:'22'} ]，} }，watch:{ //需要注意的是这里所监听的对象应该是数组arrayObj:{处理程序(newVal，old val){控制台。log(new val '-' old val)}，deep:true，immediate:true，}，methods : { change(I){//console。日志(这个。更改值)这一点。arrayobj[I].age=this.arrayObj[i].年龄} } }/剧本4、对象具体属性的手表[活用计算的]

模板div class='box' h1监听器/h1 p{{obj.name}}/p输入类型=' text ' v-model=' obj。name ' name=' id=' p { { NEWname } }/p/div/template script导出默认{ data(){ return { obj : { name : }子木，age:'23'}，}，计算出的： { newName(){返回此。物体。名字。touppercase()；} }，watch:{ newName(newVal，old val){ console。log(new val '-' old val)}，//new name : {//handler(new val，old val){//console。log(new val '-' old val)/}，//deep:true，//immediate:true，//}，}/script从效果图上可以看出，计算属性最好使用在更改数据上然后进行渲染；先进行的计算属性再进行的监听。

若有不足请多多指教！希望给您带来帮助！

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接