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

Posted junlan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
    },
    //计算属性, 缓存机制
    // 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
      }
    }
  })
  
</script>
</html>

 

以上是关于vue_computed计算属性_methods方法_watch监听器的主要内容，如果未能解决你的问题，请参考以下文章

python中的计算静态属性

uni-app计算属性（computed）、方法（methods）、监听（watch）

vue的watch、methods 和 computed 的区别

计算属性computed与methods

vue小技能：组件的 data 选项methods 选项计算属性侦听器

Vue中的methods属性和computed属性的区别