zoukankan      html  css  js  c++  java
  • VUE参考---watch、computed和methods之间的对比

    VUE参考---watch、computed和methods之间的对比

    一、总结

    一句话总结:

    computed:【缓存】 【属性】:属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;
    methods:【业务逻辑】:方法表示一个具体的操作,主要书写业务逻辑;
    watch:【键变化就调回调函数】:一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computed和methods的结合体

    二、watch、computed和methods之间的对比

    博客对应课程的视频位置:

    1、watch

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5   <meta charset="UTF-8">
     6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8   <title>Document</title>
     9   <script src="./lib/vue-2.4.0.js"></script>
    10 </head>
    11 
    12 <body>
    13   <div id="app">
    14 
    15     <input type="text" v-model="firstname"> +
    16     <input type="text" v-model="lastname"> =
    17     <input type="text" v-model="fullname">
    18 
    19   </div>
    20 
    21   <script>
    22     // 创建 Vue 实例,得到 ViewModel
    23     var vm = new Vue({
    24       el: '#app',
    25       data: {
    26         firstname: '',
    27         lastname: '',
    28         fullname: ''
    29       },
    30       methods: {},
    31       watch: { // 使用这个 属性,可以监视 data 中指定数据的变化,然后触发这个 watch 中对应的 function 处理函数
    32         'firstname': function (newVal, oldVal) {
    33           // console.log('监视到了 firstname 的变化')
    34           // this.fullname = this.firstname + '-' + this.lastname
    35 
    36           // console.log(newVal + ' --- ' + oldVal)
    37 
    38           this.fullname = newVal + '-' + this.lastname
    39         },
    40         'lastname': function (newVal) {
    41           this.fullname = this.firstname + '-' + newVal
    42         }
    43       }
    44     });
    45   </script>
    46 </body>
    47 
    48 </html>

    2、computed

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5   <meta charset="UTF-8">
     6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8   <title>Document</title>
     9   <script src="./lib/vue-2.4.0.js"></script>
    10 </head>
    11 
    12 <body>
    13   <div id="app">
    14 
    15     <input type="text" v-model="firstname"> +
    16     <input type="text" v-model="middlename"> +
    17     <input type="text" v-model="lastname"> =
    18     <input type="text" v-model="fullname">
    19 
    20     <p>{{ fullname }}</p>
    21     <p>{{ fullname }}</p>
    22     <p>{{ fullname }}</p>
    23 
    24   </div>
    25 
    26   <script>
    27     // 创建 Vue 实例,得到 ViewModel
    28     var vm = new Vue({
    29       el: '#app',
    30       data: {
    31         firstname: '',
    32         lastname: '',
    33         middlename: ''
    34       },
    35       methods: {},
    36       computed: { // 在 computed 中,可以定义一些 属性,这些属性,叫做 【计算属性】, 计算属性的,本质,就是 一个方法,只不过,我们在使用 这些计算属性的时候,是把 它们的 名称,直接当作 属性来使用的;并不会把 计算属性,当作方法去调用;
    37 
    38         // 注意1: 计算属性,在引用的时候,一定不要加 () 去调用,直接把它 当作 普通 属性去使用就好了;
    39         // 注意2: 只要 计算属性,这个 function 内部,所用到的 任何 data 中的数据发送了变化,就会 立即重新计算 这个 计算属性的值
    40         // 注意3: 计算属性的求值结果,会被缓存起来,方便下次直接使用; 如果 计算属性方法中,所以来的任何数据,都没有发生过变化,则,不会重新对 计算属性求值;
    41         'fullname': function () {
    42           console.log('ok')
    43           return this.firstname + '-' + this.middlename + '-' + this.lastname
    44         }
    45       }
    46     });
    47   </script>
    48 </body>
    49 
    50 </html>

    3、methods

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5   <meta charset="UTF-8">
     6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8   <title>Document</title>
     9   <script src="./lib/vue-2.4.0.js"></script>
    10 </head>
    11 
    12 <body>
    13   <div id="app">
    14 
    15     <!-- 分析: -->
    16     <!-- 1. 我们要监听到 文本框数据的改变,这样才能知道 什么时候去拼接 出一个 fullname -->
    17     <!-- 2. 如何监听到 文本框的数据改变呢??? -->
    18 
    19     <input type="text" v-model="firstname" @keyup="getFullname"> +
    20     <input type="text" v-model="lastname" @keyup="getFullname"> =
    21     <input type="text" v-model="fullname">
    22 
    23   </div>
    24 
    25   <script>
    26     // 创建 Vue 实例,得到 ViewModel
    27     var vm = new Vue({
    28       el: '#app',
    29       data: {
    30         firstname: '',
    31         lastname: '',
    32         fullname: ''
    33       },
    34       methods: {
    35         getFullname() {
    36           this.fullname = this.firstname + '-' + this.lastname
    37         }
    38       }
    39     });
    40   </script>
    41 </body>
    42 
    43 </html>
     
  • 相关阅读:
    228. Summary Ranges
    227. Basic Calculator II
    224. Basic Calculator
    222. Count Complete Tree Nodes
    223. Rectangle Area
    221. Maximal Square
    220. Contains Duplicate III
    219. Contains Duplicate II
    217. Contains Duplicate
    Java编程思想 4th 第4章 控制执行流程
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12765051.html
Copyright © 2011-2022 走看看