美文网首页
$set,$delete,$forceUpdate()的使用

$set,$delete,$forceUpdate()的使用

作者: Amy_yqh | 来源:发表于2018-04-26 16:05 被阅读0次
        1.$set给data对象中的变量设置值,比如我在data中定义了一个对象,在使用的时候我想给这个对象赋予一个a的属性,
        var app = new Vue({
            el:"#main",
            template:'<div>{{obj.a}}</div>'
            data:{
                  obj:{}
             }
        })
        var i=0;
         i++;
        app.$set(app.obj,'a',i)
        语法糖[vm.$set( target, key, value )]
        
        2、$delete删除对象的属性
              app.$delete(app.obj,'a')
    
        3、$forceUpdate()强行更新vue实例
              在data中声明了obj对象,但并没有a的声明
              setInterval(()=>{
                  var i=0;
                  i++;
                  app.obj.a=i;
              },1000)
              console.log(app.obj.a)
              但是在页面中并不会显示出a的值,但是a的值在一直改变,console会打印出来,这中方法a的值并没有在data中事先声明,不能显示在页面,如果想显示出来,也可以在声明obj的时候,给a声明一个空值。
            在data中声明的对象的属性并没有声明,但是调用了,这是非响应式,不会重新渲染
            方法二:        
            使用app.$forceUpdate(),强行更新vue实例
             var app = new Vue({
                  el:"#main",
                  template:'<div>{{obj.a}}</div>'
                  data:{
                    obj:{}
                   }
              })              
           setInterval(()=>{
                 var i=0;
                  i++;
                  app.$forceUpdate(app.obj,'a',i)
              },1000)
              console.log(app.obj.a)  
              $forceUpdate该方法会重新给obj的a属性重新声明,在页面就能显示出来了,但是这种方法不建议使用,如果要使用到a的值,可以先声明一个空值
    

    相关文章

      网友评论

          本文标题:$set,$delete,$forceUpdate()的使用

          本文链接:https://www.haomeiwen.com/subject/kteplftx.html