vue计算属性和看有什么区别

这篇文章给大家分享的是有关vue计算属性和看有什么区别的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

区别:1,计算属性在调用时需要在模板中渲染,修改计算所依赖元数据,看在调用时只需修改元数据。2,计算属性默认深度依赖,看默认浅度观测。3,计算属性适合做筛选,不可异步;看适合做执行异步或开销较大的操作。

<强>

是计算计算属性,它会根据你所依赖的数据动态显示新的计算结果

计算属性将被加入到vue实例中。所有getter和setter的这上下文<强>自动地绑定为vue实例

通过计算出来的属性<强>不需要调用直接可以在DOM里使用

<>强基础例子

var vm=new vue ({ 　　艾尔:& # 39;#应用# 39; 　　数据:{ 　　信息:& # 39;你好# 39; 　　}， 　　模板: 　　& lt; div> 　　& lt; p>我是原始值:“{{消息}}“& lt;/p> 　　& lt; p>我是计算属性的值:“{{computedMessage}}“& lt;/p>//计算在DOM里直接使用不需要调用 　　& lt;/div> 　　”, 　　计算:{//计算属性的getter 　　computedMessage:函数(){//罢狻敝赶蛐槟饣道? 　　返回this.message.split (& # 39; & # 39;) .reverse () . join () & # 39; & # 39; 　　} 　　} 　　})

结果:

我是原始值:“Hello"
我是计算属性的值:“olleH"

如果不使用计算属性,那么message.split (& # 39; & # 39;) .reverse () . join(& # 39; & # 39;)就会直接写到模板里,那么在模版中放入太多声明式的逻辑会让模板本身过重,尤其当在页面中使用大量复杂的逻辑表达式处理数据时,<强>会对页面的可维护性造成很大的影响

<>强而且计算属性如果依赖不变的话,它就会变成缓存,计算的值就不会重新计算

所以,如果数据要通过复杂逻辑来得出结果,那么就推荐使用计算属性

一个对象,键是数据对应的数据,值是对应的回调函数。值也可以是方法名,或者包含选项的对象,当数据的数据发生变化时,就会发生一个回调,他有两个参数,一个瓦尔(修改后的数据数据),一个oldVal(原来的数据数据)
Vue实例将会在实例化时调用<代码>看美元(),遍历表对象的每一个属性

<>强基础例子

新Vue ({ 　　数据:{ 　　n: 0, 　　obj: { 　　答:“a" 　　} 　　}， 　　模板: 　　& lt; div> 　　& lt;按钮@click=皀 +=1,在n + 1 & lt;/button> 　　& lt;按钮@click=皁bj。+=& # 39;你好# 39;“祝辞obj。+ & # 39;你好# 39;& lt;/button> 　　& lt;按钮@click=皁bj={: & # 39;一个# 39;}“祝辞obj=新对象& lt;/button> 　　& lt;/div> 　　”, 　　看:{ 　　n () { 　　console.log (“n变了“); 　　}， 　　obj: { 　　处理程序:函数(val, oldVal) { 　　console.log (“obj变了“) 　　}， 　　深:真//该属性设定在任何被侦听的对象的属性改变时都要执行处理程序的回调,不论其被嵌套多深 　　}， 　　“obj.a": { 　　处理程序:函数(val, oldVal) { 　　console.log (“obj。一个变了“) 　　}， 　　直接:真//该属性设定该回调将会在侦听开始之后被立即调用 　　} 　　} 　　})。美元山(“# app");

注意:<强>不应该使用箭头函数来定义观察家函数强劲,因为箭头函数没有,它的这个会继承它的父级函数,但是它的父级函数是窗口,导致箭头函数的这指向窗口,而不是Vue实例

<李> <强>深控制是否要看这个对象里面的属性变化 <李> <强>直接控制是否在第一次渲染是执行这个函数

<强> vm。看美元()的用法和看回调类似

<李> vm。看美元(& # 39;数据属性名& # 39;,fn,{深:. .直接:. .})

vm。看美元(“n"、功能(val newVal) { 　　console.log (“n变了“); 　　},{深:真的,立即:真})

<强> vue计算属性和观看的区别

<标题>计算属性vs属性检测首次运行首次不运行调用时需要在模板中渲染,修改计算所依赖元数据调用时只需修改元数据默认深度依赖默认浅度观测适合做筛选,不可异步适合做执行异步或开销较大的操作

如果一个数据需要经过复杂计算就用计算

如果一个数据需要被监听并且对数据做一些操作就用看

感谢各位的阅读!关于vue计算属性和看有什么区别就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!

vue计算属性和看有什么区别