计算属性computed的使用，watch？

科技2026-06-05 12

watch和computed

需求：做一个值是num值的2倍的关系 methods： 1.{{num*2}} 可以实现这个功能效果发现不方便进行管理 2.可以把多次重复的一些代码封装成一个函数进行调用发现页面中如果使用了无关数据的话，当无关数据发生改变的时候，这个doubleNum方法也会被调用，重新计算结果 3.可以通过watch监听器来去实现效果。 watch: watch可以监听现有的数据的改变，然后当现有的数据发生改变后，接下来实现对应的业务逻辑。

computed

4.我们可以通过computed(计算属性)来去解决此问题。计算属性写法是一个函数，但是在界面中调用的话需要写成属性的方式进行调用计算属性会根据现有的数据生成一个新的数据，并且两者会产生关联，建立永久性缓存并且当无关数据发生改变的时候，计算属性内部不会重新计算，而是直接从缓存里面取值使用即可。

computed vs watch的区别？

1.watch的监听只能是单个的监听，每次监听只能监听一个变量的修改，不能同时监听多个变量的修改计算属性computed可以依赖多个数据的变化（并且只跟他所依赖的项进行关联） 2.当需要在数据变化时执行异步或开销较大的操作时，只能采用watch

代码展示：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> </style> <body> <div id="app"> <p>num: {{num}}</p> <p><input type="text" v-model="msg"></p> <p @click="num++">按钮点击num</p> <p>{{num*2}}</p> <p>doubleNum: {{doubleNum()}}</p> <p>computdNum: {{computedNum}}</p> </div> <script src="./base/vue.min.js"></script> <script> var vm = new Vue({ el:"#app", data:{ num:1, msg:"hello", watchNum:"" }, computed:{ computedNum(){ // console.log("computedNum....") return this.num*2 } }, watch:{ num:{ immediate:true,//初始化的时候也会执行一次 handler(newValue,oldValu){ this.watchNum = newValue*2 } }, }, methods:{ doubleNum(){ // console.log("doubleNum这个函数倍调用了...") return this.num*2 } } }) </script> </body> </html>

Processed: 0.018, SQL: 9