美文网首页
vue的响应式系统

vue的响应式系统

作者: 3e2235c61b99 | 来源:发表于2020-12-11 11:17 被阅读0次

在之前vue项目的开发过程中,我一般会把在页面中需要用到的属性在data中进行定义
之前一直没有了解过原因,知道看到这个官方的解释

只有当实例被创建时就已经存在于 data 中的 property 才是响应式的.也就是说如果你添加一个新的 property,比如:vm.b = 'hi'那么对 b 的改动将不会触发任何视图的更新。
示例如下:

<template>
    <div>
        <div>{{ msg }}</div>
        <div>{{ name }}</div>
        <el-button @click="dianji">点击</el-button>
    </div>
</template>
data() {
    return {
        msg: "这只是个信息",
    }
},
created() {
    this.init()
},

methods:{
    init() {
        this.name = "明妃"
    },

    dianji() {
        this.name = "路主席"
        console.log(this.name)
    },
}

这样写代码,在页面上可以显示出来"明妃",但是点击按钮之后,this.name的值变为"路主席"了,页面上显示的却还是"明妃",因为this.name在vue实例创建时不在data中,没有被加入到vue的响应式系统中,this.name就不是响应式的,所以只对this.name进行修改不会触发试图更新
把上面的dianji方法改成下面这样,因为msg是响应式的,会触发视图更新,所以页面上的this.name内容也会变化

dianji() {
    this.name = "路主席"
    this.msg = "点击之后会被修改"
    console.log(this.name)
    console.log(this.msg)
},

个人感觉这样写并不好,所以还是在data()中预先声明吧
如果你知道你会在晚些时候需要一个 property,但是一开始它为空或不存在,那么你仅需要设置一些初始值.比如:

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

另:
vue.set() 或者 this.$set()也可以触发试图更新

vue.set()用法:向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')
注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。

相关文章

  • vue 3.0 笔记

    vue 3.0 笔记 1、Vue 3.0 如何做到性能提升 响应式系统升级使用 Proxy 对象重写响应式系统:v...

  • 【浅谈Vue3 effect】

    Vue3 中引入了 proxy进行数据劫持,而effect是响应式系统的核心,而响应式系统又是 vue3 中的核心...

  • Vue原理学习(二)

    响应式系统的基本原理 Vue基于Object.defineProperty来实现响应式,对于Object.defi...

  • 前端面试题【Day02】

    本篇绪论 1,Vue响应式原理 1,Vue响应式原理 在vue实例中声明的数据就是响应式的。响应式:数据发生改变,...

  • Vue初识(1)

    1、Vue是一个响应式系统,所有在Vue实例中data对象中所有的属性都会加入到响应式系统中,这些属性的值发生改变...

  • Vue 数据响应式原理

    前言 Vue.js 的核心包括一套“响应式系统”。 “响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码...

  • 面试总结之基础(2)

    Vue2响应式原理 Vue3响应式原理

  • vue实现数据响应式的过程

    1.怎样更形象的解释vue.js的响应式系统? 在前端框架中,vue.js的灵魂所在就是其“数据响应式”,简单的描...

  • 手写一个简易Vue

    1. 起步 1.1 响应式原理 我们都知道响应式是vue最独特的特性,是非入侵的响应式系统.数据模型仅仅是普通的 ...

  • vue 响应式系统

    简述: vue 初始化时会用Object.defineProperty()给data中每一个属性添加getter和...

网友评论

      本文标题:vue的响应式系统

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