Vue数据响应和插值表达式

Vue基础（二）

vue数据响应

• 称呼：深入响应式原理 、双向数据绑定原理
• 概念：当数据改变时，视图也随之改变，当用户输入信息时，数据也随之改变
• 原理：Vue是通过数据劫持来对数据进行响应式拦截的，通过使用es5的Object.defineProperty中的getter和setter来进行数据劫持的
• 注意：
  1. 这个数据劫持的对象是Vue中的data选项
  2. 如果在data选项外定义数据，那么是不响应的

简单了解原理

const box = document.querySelector('.box') 
const btn = document.querySelector('button')
const data = {
   
    msg: ''
  }
btn.onclick = function () {
   
    data.msg = 'Hello Vue'
  }
// Object.defineProperty( 哪一个对象，这个对象的某一个属性， 属性的描述符 )

Object.defineProperty( data, 'msg'