计算属性和侦听器

计算属性和methods

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="app">
    <my-cpn></my-cpn>
  </div>
  <template id="tmp">
    <div>
      <p>反转信息1： {{reversedMessage1}}</p>
      <p>反转信息2： {{reversedMessage2()}}</p>
      <p>{{now}}</p>
      <button @click="() => $forceUpdate()">强制更新</button>
      <input type="text" v-model="message">
    </div>
  </template>
  <script>

    Vue.component('my-cpn', {
      template: "#tmp",
      data() {
        return {
          message: "hello vue"
        }
      },
      computed: {
        reversedMessage1() {
          console.log("执行了计算属性");
          return this.message
          .split("")
          .reverse()
          .join("")
        },
        now() {
          return Date.now()
        }
      },
      methods: {
        reversedMessage2() {
          console.log("methods方法执行");
          return this.message
          .split("")
          .reverse()
          .join("")
        }
      }
    })
    new Vue({
      el: '#app',
      data: {},
      methods: {}
    })
  </script>
</body>
</html>

说明：

计算属性：

减少模板中的计算逻辑
数据缓存
依赖固定的数据类型

代码说明：

组件使用vm.$forceUpdate()迫使Vue.js实例重新渲染，该方法仅影响实例本身以及插入插槽内容的子组件；
实例的重新渲染会使调用方法重新执行函数；
计算属性是基于它们的响应式依赖进行缓存的。当计算属性所依赖的响应式属性或计算属性的返回值发生变化时才会重新计算；因此点击按钮，计算属性中的代码不会执行；只有在更改双向绑定的input输入框内容时，才重新触发计算属性中的方法；

计算属性和侦听器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <h2>{{fullName}}</h2>
    <label for="firstName">first</label>
    <input type="text" v-model="firstName" id="firstName">
    <label for="lastName">lastName</label>
    <input type="text" v-model="lastName" id="lastName">
    <hr>
    <my-cpn></my-cpn>
  </div>
  <template id="tmp">
    <div>
      <h2>{{fullName}}</h2>
      <label for="firstName">first</label>
      <input type="text" v-model="firstName" id="firstName">
      <label for="lastName">lastName</label>
      <input type="text" v-model="lastName" id="lastName">
    </div>
  </template>
  <script>
    Vue.component('my-cpn', {
      template: "#tmp",
      data() {
        return {
          firstName: 'Jack',
          lastName: 'Trump',
        }
      },
      computed: {
        fullName() {
          return this.firstName + ' ' + this.lastName
        }
      }
    })
    new Vue({
      el: '#app',
      data: {
        firstName: 'Jack',
        lastName: 'Trump',
        fullName: ''
      },
      methods: {},
      watch: {
        firstName(val) {
          this.fullName = val + " " + this.lastName
        },
        lastName(val) {
          this.fullName = this.firstName + " " + val
        }
      }
    })
  </script>
</body>

</html>

侦听器说明：

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的
函数节流、aiax异步获取数据、操作DOM