在Vue中为什么有$set这个api？

最新推荐文章于 2024-08-19 22:18:34 发布

kazuki99

最新推荐文章于 2024-08-19 22:18:34 发布

阅读量712

点赞数

分类专栏： Vue的网络笔记文章标签： vue.js javascript es6 前端

本文链接：https://blog.csdn.net/kazuki99/article/details/105857383

版权

Vue的双向绑定通过Object.defineProperty实现，当新增对象属性时，若未在data中声明，视图不会更新。为解决这个问题，Vue提供了$set方法，确保新增属性能触发视图更新。数组操作同样存在类似问题，Vue重写了相关方法。$set在编码中用于在不改变对象引用的情况下添加属性并更新视图。

摘要由CSDN通过智能技术生成

在Vue中，如果想实现数据的双向绑定有几种方式：最常见的就是把数据放在data中，然后template去绑定这个数据，这样就实现了双向绑定。

有的时候我们会发现，明明在template中绑定了这个属性 console.log 出来也是有的，但页面上就是显示不出来。

例如：点我运行下面代码

<template>
  <div class="hello">
    <h1>{
  { msg }}</h1>
    <pre> {
  { obj.c }} </pre>
    <br>
    <button @click="addOne">点我+1</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: { msg: String },
  data() {
    return {
      obj: {
        a: 1,
        b: 2
      }
    };
  },
  watch: {
    obj: {
      handler: function(newV) {
        console.log("我发生变化了", newV);
      }
    }
  },
  methods: {
    addOne() {