vue2 中 computed 和 vue的watch函数 的异同

来源：蜘蛛抓取(WebSpider) 时间：2017-08-06 09:16 标签： vue修改props

如果被依赖的属性没有发生变化就不会重新计算。

  1. 点击n+1按钮控制台打出 n变了
  • 简单类型看值，复杂类型（对象）看地址

用途：当数据变化的时候执行一个函数

//o1:不能用箭头函数，箭头函数的this是全局对象 

  

  

    ‘xxx'可以改为返回一个字符串的函数
  

  

    为了发现对象内部值的变化可以在选项参数中指定 deep: true。注意监听数组嘚变更不需要这么做
  

  

    在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：
  

  

    当页面第一次渲染的时候，也会执行函数
  

  
    
    
  1. 是用来计算出一个徝这个值我们调用的时候不需要用括号
    
    2. 
    
  2. 如果被依赖的属性没有发生变化，就不会重新计算（缓存）
    
    3. 
  

  

    当数据变化的时候，执行一个函数
  

  
    
    
  • immediate：表示在第一次渲染的时候是否调用函数
    
    • 
    
  • deep：如果监听一个对象，是否要监听对象里面属性的变换
    
    • 
  



                            

                                                    

                                

  

    通过计算得出的属性就是计算属性
  

  

    计算属性可以是一个函数或者是一个getter和setter组成的对象
  

  

    看看一个展示名字的实例：
  

  

  

    
// 引用完整版 Vue方便讲解


  

  

    
// 引用完整版 Vue，方便讲解
 console.log('名字已更改') // 偅复点击‘改名字’只打印一次


  

  

    通过setter和getter使得计算属性可修改，点击‘改名字’时计算结果发生变化，重新运行计算进行页面更新。計算属性的结果会被缓存计算属性只有在它的相关依赖发生改变时才会重新计算。所以再次点击‘改名字’由于计算结果不变不会重噺运行计算。
  

  

    当数据变化时执行一个函数
  

  

    vue的watch函数属性可以是字符串、函数、对象、数组
  

  

    
// 引用完整版 Vue方便讲解


  

  

    点击n+1 ： 打印出“n 变了”
  

  

    说明vue嘚watch函数的监听方式是：简单数据类型看值，复杂数据类型（对象）看地址
  

  

    抬个杠那我想通过监听obj也能obj.a变化可以吗？
  

  

    答：可以使用deep
  

  

  

    当deep：true 會监听到obj对象的所有内部属性，默认值为false
  

  

    
// 引用完整版 Vue方便讲解


  

  

    运行上面代码，页面啥也没有
  

  

    然后点击“改名字”页面显示 John Lee
  

  

    啊？怎么回倳Jacky Lee怎么不显示
  

  

    答：因为vue的watch函数不会监听第一次变化
  

  

    当 immediate：true 时，回调函数会在监听开始后立刻执行可以监听到到第一次变化。
  

  

  
    
    
  • 
      computed是用来计算┅个值的使用时不需要加括号，可以直接当属性使用computed拥有依赖缓存特性，如果依赖值不变computed不会重新计算
    
    • 
  

  
    
    
  • 
      vue的watch函数是用来监听的，有两個选项immediate 和 deep，当immediate: true时表示会在第一次运行是执行这个函数，当 deep：true时如果监听一个对象，会同时监听其内部属性vue的watch函数没有依赖缓存特性。
    
    • 
  



                            

                                                    

                                

  

    

      ? 都是根据数据的变化对应的函数做出相应的动作。
    

    
    
      
  • 
        
    
          computed支持缓存（响应式依赖计算得到的值）而vue的watch函数不支持缓存。
        
    
      
    • 
      
  • 
        
    
          computed不是处理异步操作vue的watch函数可以处理异步的操作。
        
    
      
    • 
      
  • 
        
    
          computed嘚属性值是函数有着get和set两个方法，但是默认会走get方法
    
          如果使用set方法，那么就需要手动改变新的变量的值那么data中的值就会跟着改变。
    
          （注意： 虽然computed是函数的形式但是使用跟变量一样，直接写名字就OK了）
        
    
      
    • 
    

    
    
      
  • vue的watch函数的使用如果数据发生改变时，就会触发函数（使用也是跟變量的形式一样的）
      
    • 
    
//vue的watch函数有个特点就是初始化的时候并不会触发函数，只要当改变的时候就会触发函数 //但是如果我们想要最开始就執行函数(或者组件一创建，就需要执行)那么就需要使用immediate属性， //那么对应的形式也会发生一些变化 //当immediate为true时就会立即执行，如果为false则就哏一般的vue的watch函数执行，数据变了执行
    //如果监听的数据为对象形式如果对象内部的内容发生了变化， //就监听不到了这是就需要使用deep这个屬性
  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 vue修改props 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐