Vuejs全家桶系列(五)---属性和方法

本文详细介绍了Vue实例的各种属性,如$el、$data、$options等,并深入探讨了实例方法如$nextTick、$set、$delete的作用及使用场景。此外,还特别讲解了$watch的使用技巧,包括如何深度监听对象属性的变化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue实例属性

vm.$el

Vue 实例使用的根 DOM 元素。

console.log(vm.$el === document.getElementById('#app')) //true
console.log(vm.$el);

结果为
这里写图片描述

vm.$data

Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。

console.log(vm.$data);
console.log(vm.msg);

这里写图片描述

vm.$options

用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处:

var vm = new Vue({
  el:'#app',
  data:{
    msg:'hello world'
  },
  name:"xgb",
  age:12,
  cs:function(){
    console.log("cs");
  },
  methods:{
    one:function(){
        console.log("methods one");
    }
  },
  created:function(){
    console.log("created");
  }
});
console.log(vm.$options);

这里写图片描述

vm.$refs

一个对象,持有已注册过 ref 的所有子组件。

<div id="app">
     <h2 ref="one">one</h2>
     <h2 ref="two">two</h2>
</div>
console.log(vm.$refs);

这里写图片描述

vue实例方法

vm.$nextTick(callback)

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。

通俗的说就是其内的代码会在DOM 更新循环完成以后执行

<body>
    <div id="app">
        <button @click="update">改变</button>
        <p ref="word">{{msg}}</p>
    </div>
    <script type="text/javascript">
      var vm = new Vue({
        el:'#app',
        data:{
          msg:'hello world'
        },
        methods:{
            update(){
                this.msg = 'why';
                console.log(this.$refs.word.textContent);
                //这里输出的是原来的值 hello world,而不是why
                //因为js是异步请求机制的,this.msg的值改变了vue有一个监视的机制,这需要时间(虽然很快,但是console.log更先执行)
            }
        }
      });
    </script>
</body>

这里写图片描述

修改代码后

update(){
    this.msg = 'why';
    vm.$nextTick(function(){
        console.log(this.$refs.word.textContent);
    })
}

这里写图片描述

vm.$set(object,key,value)

<body>
    <div id="app">
        <h2>{{user.name}}</h2>
        <h2>{{user.age}}</h2>
        <h2>{{user.nek}}</h2>
        <button @click="add">添加一个属性</button>
    </div>
    <script type="text/javascript">
      var vm = new Vue({
        el:'#app',
        data:{
          user:{
            name:'panini',
            age:20
          }
        },
        methods:{
            add(){
                this.user.nek = "mm";//给user添加一个属性
            }
        }
      });
    </script>
</body>

运行这段代码我们本以为在“20”所在行下会出现一行”mm”,但是却没有
这里写图片描述

可是user.nek明明有值的

console.log(user.nek); //mm

但是却不显示出来

<h2>{{user.nek}}</h2>

因为vue有一套数据绑定的规则,我们如果要添加一个属性按规定必须要知会他一声,怎么通知vue呢?我们用set方法
修改代码后

add(){
     Vue.set(this.user,'nek','mm'); /*这里用的是全局api,换成vm.$set也是一样的*/
}

结果为

vm.$delete(object,key)

类似于set,delete是删除一个属性

<body>
    <div id="app">
        <h2>{{user.name}}</h2>
        <h2>{{user.age}}</h2>
        <h2>{{user.nek}}</h2>
        <button @click="remove">删除一个属性</button>
    </div>
    <script type="text/javascript">
      var vm = new Vue({
        el:'#app',
        data:{
          user:{
            name:'panini',
            age:20
          }
        },
        methods:{
            remove(){
                Vue.delete(this.user,'age');
            }
        }
      });
    </script>
</body>

结果为

vm.$watch(data,callback[,options])

一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

通俗来说就是watch监视键的状态,一旦键发生变化,就去执行对应的值方法

<body>
    <div id="app">
        {{msg}}
        <button @click="change">改变msg</button>
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data:{
          msg:"hello world"
        },
        methods:{
            change:function(){
                this.msg += "1";
            }
        },
        watch:{
            msg:function(newValue,oldValue){
                console.log('msg被修改啦,原值:'+oldValue+',新值:'+newValue);
            }
        }
      });
    </script>
</body>

一旦我点击”改变msg“按钮一次,this.msg的值+=”1”,执行watch的键msg对应的方法一次。

这里有很多人会把computed和watch的使用搞混淆。

关于computed和watch的区别可以参考我的另一篇博客
Vuejs中关于computed、methods、watch的区别

但是这里有一个问题:
如果watch监视的键是一个对象

<body>
    <div id="app">
        {{user.name}}
        <button @click="change">改变user</button>
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data:{
          user:{
            name:'panini',
            age:20
          }
        },
        methods:{
            change(){
                this.user.name += "1";
            }
        },
        watch:{
            user:function(newVal,oldVal){
                console.log("user改变了");
                console.log(newVal+"and"+oldVal);
            }
        }
      });
    </script>
</body>

不论我点击多少次”改变user“按钮,watch都丝毫不为所动
直到我一怒之下,做了以下的修改

change(){
    this.user = {
        name: "hhh",
        age:18
    };
}

watch终于感到了
输出了以下的语句

user改变了
[object Object]and[object Object]

没错newVal和oldVal都是一个对象,到这里你应该明白了:
如果watch监视的键是一个对象,那么只有当对象的地址改变了,watch才会调用对应的值方法

那么我想当对象的某个属性变化了就触发watch有没有办法呢?
办法总是有的!!
请看下面的代码

watch:{
    user:{
        handler:(newValue,oldValue) => {
            console.log('user被修改啦,原值:'+oldValue.name+',新值:'+newValue.name);
        },
        deep:true //深度监视,当对象中的属性发生变化时也会监视
    }
}

现在你明白了watch里面deep:ture的意义所在了吧

输出的结果是

user被修改啦,原值:panini1,新值:panini1

怎么样,user终于成功被修改了。

咦,不对,等一下。为什么原值和新值都是panini1啊

那是因为newVal和oldVal都是同一个对象啊!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值