Vue.js计算属性computed与watch(5)
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用**计算属性**。
vue实例的computed的属性
<div class="test"> <p>原始的信息{{message}}</p> <p>计算后的信息{{computedmessage}}</p> </div>
js代码
var myvue = new vue({ el: ".test", data: { message:12 }, computed:{ computedmessage:function () { return this.message+10; } } });
界面会显示 12 和 22
上述的方式是一种缓冲的实现的效果,这种实现的方式依赖于它的缓寸,计算得到的属性只有在相关依赖(message)改变的时候才会重新取值,这就意味着只要message没有发生改变的时候,多次访问computedmessage都不会再重新执行计算的这个属性。。
计算后的computedmessage属性始终是依赖于message的
通过调用函数实现同样的效果
<div class="test"> <p>原始的信息{{message}}</p> <p>计算后的信息{{messagefunction()}}</p> </div>
js代码
var myvue = new vue({ el: ".test", data: { message:12 }, methods:{ messagefunction:function () { return this.message+10; } } });
得到的结果和上面的结果是一样的,但是每次被重新渲染的时候都会被重新调用。
所以使用上述两种方式的时候,首先要确定你是否需要借助缓存
使用vue实例的watch
这个没有看懂呀
但是使用computed这个属性更加的方便和快捷
<div class="test"> <p>原始的信息{{fullname}}</p> </div>
js代码
var myvue = new vue({ el: ".test", data: { firstname:"fur", lastname:"bool" }, computed:{ fullname:function () { return this.firstname+this.lastname } } });
而且你可以computed属性设置setter getter是默认就有的。
演示set和get的调用过程
<div class="test"> <p>原始的信息{{fullname}}</p> <button @click="fu">test</button> </div>
js代码
var myvue = new vue({ el: ".test", data: { firstname:"fur", lastname:"bool", fullname:"sasas dsdsd dsds" }, computed:{ fullname:{ get:function () { console.log("get") return this.firstname+this.lastname }, set:function(value){ var names=value.split(" "); this.firstname=names[0]; this.lastname=names[names.length-1]; console.log("set"); } } }, methods:{ fu:function () { myvue.fullname="sasas dsdsd dsds"; console.log(myvue.firstname); //sasas console.log(myvue.lastname); //dsds } } });
首先会输出get;
在点击按钮为fullname赋值的时候首先调用set 再调用get方法。
自定义的watcher
虽然计算属性在大多数情况下是非常合适的,但是有的时候也需要自定义一个watcher。这是因为你想要在数据变化响应的时候,执行异步操作*和其他的操作是非常有用的。
上一篇: 经典老笑话-唐伯虎戏寡妇
下一篇: 第一次吵架就坚持分手,这些星座真的受够了
推荐阅读
-
Vue.js每天必学之计算属性computed与$watch
-
Vue.js第三天学习笔记(计算属性computed)
-
vue计算属性computed、事件、监听器watch的使用讲解
-
Vue.js计算属性computed与watch(5)
-
vue中filter过滤器,computed计算属性,以及watch侦听器用法及区别
-
Vue框架整理:computed计算属性设置与缓存
-
vue.js计算属性computed用法实例分析
-
Vue.js中的计算属性、监视属性与生命周期详解
-
Vue.js每天必学之计算属性computed与$watch
-
Vue.js-Day02-AM【Vue表单、核心指令(单选框、密码框、多行文本框、单选、多选、勾选、下拉列表)、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】