computed 和 watcher

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的值 没有改变  因为它监听的值没有发生变化 

 

posted @ 2021-01-27 14:42  1点  阅读(88)  评论(0)  编辑  收藏  举报