2021-11-19 vue和vue

vue2中用Object.defineProperty()

const data = {
    name: '张三'
  }
  let $data = {}
  Object.defineProperty($data, 'name', {
    get: function () {
      return data.name
    },
    set: function (value) {
      data.name = value
    }
  })
  console.log($data.name)
  $data.name='李四'
  console.log(data.name)

结果：

image.png

vue3中用Proxy

 const data = {
    name: '张三'
  }
const v3=new Proxy(data,{
    get: function (obj,props) {
      return obj[props]
    },
    set: function (obj,props,value) {
      obj[props] = value
    }
  })

  console.log(v3.name)
  v3.name='vue3'
  console.log(data.name)

结果：

image.png