vue_computed计算属性_methods方法_watch监听器 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- {{fullName}} --- {{age}} 计算属性-->
    <!-- {{fullName()}} --- {{age}} methods方法-->
     {{youFullName}} --- {{age}}---watch侦听器
  </div>
</body>
<script type="text/javascript">
  let vm = new Vue({
    // vue模板语法
    el: '#app',
    data: {
      firstName: 'Dell',
      lastName: 'Less',
      youFullName: 'Dell Less',
      age: 20,
　　　 deepWatch: {name: 'jack', age: 18}

    },
    //计算属性, 缓存机制
    // computed: {
    //   fullName () {
    //     // 当firstName 和lastName 没有发生改变时，fillName不会重新计算(调用函数)，提升性能
    //     console.log('计算一次')
    //     // 控制台调用vm.$data.age = 15, age发生变化，
    //     // fullName由于缓存机制，相关联的属性没有发生改变就不会重新计算
    //     return this.firstName +' '+ this.lastName
    //   }
    // }
    
    // methods方法
    // methods: {
    //   fullName () {
    //     console.log('methods方法计算一次')
    //     // 控制台调用vm.$data.age = 15, age发生变化，fullName也发生变化
    //     return this.firstName + ' ' + this.lastName
    //   }
    // }
    
    //watch 侦听器， 缓存机制
    watch: {
      //监听firstName和lastName属性是否发生改变并作出相应的操作
      //控制台调用vm.$data.age = 15, age发生变化，youfullname并不会发生变化，因为并没有监听age属性
      //
      firstName: function () {
        console.log('watch监听')
        this.youFullName =  this.firstName + ' ' + this.lastName
      },
      lastName: function () {
        console.log('watch监听')
        this.youFullName =  this.firstName + ' ' + this.lastName
      },
　　  // 深度监听，当监听的数据为对象或者数组时，启用深度监听
　　　 deepWatch: {
　　　   handler: function () {
          console.log('deepWatch监听')
        },
　　　　　deep: true
      }
} }) </script> </html>

 

posted @ 2020-03-04 17:21  前端之旅  阅读(535)  评论(0)    收藏  举报