watch ： 当数据发生变化的时候 会 触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 8</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // data & methods & computed & watcher // computed 和 method 都能实现的一个功能，建议使用 computed，因为有缓存 // computed 和 watcher 都能实现的功能，建议使用 computed 因为更加简洁 const app = Vue.createApp({ data() { return { message: "hello world", count: 2, price: 5, newTotal: 10, } }, watch: { // price 发生变化时，函数会执行 price(current, prev) { this.newTotal = current * this.count; } }, computed: { // 当计算属性依赖的内容发生变更时，才会重新执行计算 total() { return Date.now() + this.count; // return this.count * this.price } }, methods: { formatString(string) { return string.toUpperCase(); }, // 只要页面重新渲染，才会重新计算 getTotal() { return Date.now(); // return this.count * this.price; }, }, template: ` <div> {{message}} {{newTotal}} {{total }} </div> ` }); const vm = app.mount('#root'); </script> </html>
当我们改变 price 的值的时候 会触发 监听
改变 监听的值
price 的值 改变了 监听函数触发 newTotal 也发生改变了 但是 total 的值没有发生改变 当计算属性依赖的内容发生变更时，才会重新执行计算
--------------------------------------------------------------------------------------------------------------------------------------------------------------
当计算属性依赖的值发生变化的时候 会重新计算
计算数学依赖的值为 count 当count 发生变化的时候 计算属性才会触发
这个时候 newTotal的值 没有改变 因为它监听的值没有发生变化