chrome vue 未响应_VUE数据响应式

最新推荐文章于 2024-07-13 23:43:42 发布

weixin_39928993

最新推荐文章于 2024-07-13 23:43:42 发布

阅读量310

点赞数

文章标签： chrome vue 未响应

本文链接：https://blog.csdn.net/weixin_39928993/article/details/112155993

版权

本文探讨Vue的响应式原理，当new Vue()时，Vue如何使data变为响应式，包括代理和监听数据变化。当data变化时，UI会随之更新。Vue通过Object.defineProperty实现数据响应，并提供Vue.set用于在data中添加属性。文章还提到，对于数组，Vue提供了特殊的处理方式，确保新增元素也能触发视图更新。

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

响应式顾名思义就是对外界的触发变化做出响应。

在vue中，vue的data是响应式的，我们会很好奇，为什么传入new Vue({})中的data在做出变化的时候，UI中相应地显示的数据也会响应做出变化，vue到底是如何实现的？

const myData = {
    
  n:0
}
console.log('最初的myData:',myData)
new Vue({
    
  data: myData,
  template: `
    <div>{
    {n}}</div>
  `
}).$mount('#app')

setTimeout(() => {
    
  myData.n += 10
}, 3000)

console.log('被Vue篡改后的myData',myData)