computed的用法（如何使用Vuecomputed）

本文目录

• 如何使用Vuecomputed
• watch和computed的区别及用法
• watch和computed的区别
• Vue中computed与watch何时使用
• computed和watch的区别是什么
• vue的computed怎么使用
• Vue中computed计算属性的使用和三个特点

如何使用Vuecomputed

这次给大家带来如何使用Vue computed，如使用Vue computed的注意事项有哪些，下面就是实战案例，一起来看一下。
Vue中computed可以用来简单的拼接需要展示的数据
computed and methods
拼接展示数据的任务, 也可以用methods完成, 但当页面的数据变化时, methods中的方法会被重新调用(产生不必要的性能消耗), 而methods内的方法只有和自身有关的数据变化时才会被调用
一个简单的实例
computed只在初始化时被调用
computed只在初始化时被调用
methods会在数据变化时被调用, 即使变动的数据与自身无关
测试源码
《!DOCTYPE html》
《html lang="en"》
《head》
《meta charset="UTF-8"》
《title》computed的使用《/title》
***隐藏网址***
《/head》
《body》
《p id="root"》
《/p》
《script》
var vm = new Vue({
el: "#root",
data: {
name: "zhaozhao",
age: 13,
hobby: ’Python’,
nameAgeStyle: {
fontSize: "20px",
color: "#0c8ac5"
}
},
template: `《p》
《p v-bind:style="nameAgeStyle"》computed方式渲染: {{nameAndAge}}《/p》
《p v-bind:style="nameAgeStyle"》methods 方式渲染: {{getNameAndAge()}}《/p》
《br》
《input type="text" v-model="hobby"》
《p》爱好: {{hobby}}《/p》
《p》{{noUse()}}《/p》
《/p》`,
computed: {
nameAndAge: {
get(){
console.log(’调用computed’);
return `${this.name} ==》 ${this.age}`;
}
}
},
methods: {
getNameAndAge() {
console.log(’调用methods’);
return `${this.name} ==》 ${this.age}`;
},
noUse(){
console.log("=methods==nouse==");
}
}
})
《/script》
《/body》
《/html》相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
如何使用android与HTML混合开发
Angularjs做出控制器相互通信功能详解

watch和computed的区别及用法

watch和computed的区别及用法，如下所述：

1、watch中的函数是不需要调用的，computed内部的函数调用的时候不需要加括号。Watch是属性监听，监听属性的变化；computed是计算属性，通过属性计算而得来的属性。

2、watch需要在数据变化时执行异步或开销较大的操作时使用。computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用。

3、watch需要在数据变化时执行异步或开销较大的操作时使用，对于任何复杂逻辑或一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种青况下，我们最好使用计算属性corputed。

computed：属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作寓性来使用；computed中的函数必须用return返回最终的结果。当computed中的函数所依赖的属性如果没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取。

4、Watch：一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作。

Computed：当一个属性受多个属性影响的时候就需要用到computed。最典型的例子：购物车商品结算的时候。

watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

watch和computed的区别

计算属性通常依赖于其他数据属性。对于依赖属性的任何改变都会触发计算属性的逻辑。计算属性基于它们的依赖关系进行缓存，因此只有当依赖项发生变化时，它们才会重新运行，否则他会使用缓存中的属性值。（例如，返回 new Date()的计算属性将永远不会重新运行，因为逻辑将不会运行超过一次）。计算属性在默认情况下是getters，但是如果需要实现类似的功能，则可以设置setter函数。
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

watch：
watch用来监听当一个数据属性值发生变化时，就可以调用的函数，没有必须依赖的数据属性；属于异步操作；
Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

举个栗子

但数据量较大的时候，用watch更合适；在过滤数据的时候用computed。

computed的基础用法：
计算属性的getter函数---当其依赖的属性的值发生变化的时，这个计算属性的值也会自动更新。多用于"data，computed"的属性。
计算属性的setter函数---当赋值给计算属性的时候，将调用setter函数。多用于在模板组件中需要修改计算属性自身的值的时候，例子如下：

计算属性的缓存---Vue实例中被观察的数据属性发生了改变时才会重新执行getter,但是我们有时候计算属性依赖实时的非观察数据属性，比如下面例子中的Data.now

计算属性getter不执行的场景---当包含计算属性的节点被移除并且模板中其他地方没有再引用该属性的时候，那么对应的计算属性的getter函数方法不会执行
在v-for中使用计算属性，起到类似"过滤器的作用"，例子如下：

watch与computed的set函数的比较---uex 接收 的computed ，用set监测不到变化，必须要用watch才可以生效；（原理：实质没有改变computd的值，只是改变了get的return值 =》 组件外的访问）
v-model 改变的computed，用watch监测不到变化，必须要用computed对象中的set函数方法才能监测得到（原理：相当于每次改变了computed自身的值 =》 组件内的访问）

computed和watch都不可用箭头函数，因为箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

父组件通过props向子组件传入的值，在子组件中是不可修改的，不然会报错，但是如果需要根据页面需求对props传入的值进行修改的话，则可以在data中重新定义一个变量，改变指向，通过watch来监测props值的改变，并实时修改data中变量的值，例子如下：

这里 watch 的一个特点是，最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算。
那我们想要一开始就让他最初绑定的时候就执行改immediate: true。

handler，Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改里面任何一个属性都会触发这个监听器里的 handler。

举个栗子：

Vue中computed与watch何时使用

computed被叫做计算属性：

1.在页面中使用大量或是复杂的表达式去处理数据，对页面的维护会有很大的影响。这个时候就需要用到computed 计算属性来处理复杂的逻辑运算，这样在页面中就可以简单的写成{{bookmark}}，computed一般是改变data或者props里面的值为己用。

2.computed的值不可以在data中定义和赋值

watch被叫做侦听器：
1.虽然计算属性在大多数情况下是非常适合的，但是在有些情况下我们需要自定义一个watcher，当需要在数据变化时执行异步或开销较大的操作时，这时watch是非常有用的。

在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
2.watch可以进行深度监听，监听对象的变化。

如果我们要监听group的data1的变化

里面的deep设为了true，这样的话，如果修改了这个group中的任何一个属性，都会执行handler这个方法。不过其实这样开销是蛮大的，尤其是对象里面结构嵌套过深的时候。而且有时候我们就想关心这个对象中的某个属性，比如data3，这个时候可以这样：

有不完美之处欢迎大家多提意见~~

computed和watch的区别是什么

一、指代不同

1、computed： (用计算机或计数器)计算；估计。

2、watch：注视；看守；观看；手表；监视；看守；值班。

二、侧重点不同

1、computed： 多用于表示人在使用计算机或计算器在进行计算、估算。

2、watch：多用于表示对某事物或人的看守、监视；同时表示物体：手表之意。

三、引证用法不同

1、computed：compute作计算，估算解时，是正式用法，指计算结果、答案、数目等；用作及物动词时，可接名词、代词或that从句作宾语。

2、watch：watch的基本意思是观看、注视，指用眼睛跟踪某物以观察到每一个动作、变化、危险迹象、机会等。引申可表示照管、守护、保卫等，指明确需要警觉，做好防止危险发生的准备，强调连续性和职务性。

vue的computed怎么使用

computed是计算属性用的。举个例子：

《p》{{n}}《/p》

data: function (){
  return {
    n: 0
  }
},
computed: {
  n (val) {
    if (val) {
      return n + ’元’
    }
  }
}

这个的意思就是，当n为真的时候后面加一个‘元’ 字，，这个n的具体改变，可以在method里呀， 或是 watch里呀进行改变；

个人理解，仅供参考，尽情追问

Vue中computed计算属性的使用和三个特点

computed是Vue实例中的一个属性对象。

在computed中，可以定义一些属性，这些属性，叫做计算属性。计算属性的本质就是一个方法，只不过，我们在使用这些计算属性的时候，是把它们的名称，直接当做属性来使用，并不会把计算属性当做方法来使用。

三个注意事项：

一、计算属性在引用的时候，一定不要加()去调用，直接把它当作普通的属性去使用就好了；

二、只要计算属性这个function内部所用到的data中的数据发生了变化，就会立即重新计算这个计算属性的值；

三、计算属性的求值结果，会被缓存起来，方便下次继续使用；如果计算属性方法中，所依赖的任何数据，都没有发生过变化，则不会重新对计算属性求值。