Vue.js 基础及双向数据绑定

前端JS框架有什么作用？

---

1. JS框架帮助开发者写JS逻辑代码，功能分为以下几点：
   • 渲染数据
   • 操作DOM
   • 操作cookie等存储机制api
2. 如何高效的操作dom、渲染数据是前端工程师需要考虑的问题？
   • 解决：
     1. JS框架对上诉的问题都有自己趋于完美的解决方案。
     2. 开发成本降低，高性能高效率。
     3. 唯一的缺点就是需要使用一定的成本来学习。

Vue实现数据绑定的原理

---

1. Vue深入响应式原理图

// Vue 底层原理 

  // 目的： 使用原生js来实现Vue深入响应式 

  var box = document.querySelector('.box')

  var button = document.querySelector('button')

  var data = {
    name: 'Jick'
  }

  // 观察者对象

  var observer = {...data} 

  // es5提供的api方法,这个方法不兼容ie8以及以下
  // Object.defineProperty(对象，对象的属性，对象属性的修饰符 )



  Object.defineProperty(  data,'name',{
    // get/set  统称为: '存储器'
    get () {
      return  observer.name // 初始化赋值一个值给name属性
    },
    set ( val ) {
      console.log( val )
      box.innerHTML = val
    }
  })

  button.onclick = function () {
    data.name = "Rose"
  }

  box.innerHTML = data.name 

2. 如何理解深入响应式原理？
   • Vue是通过数据劫持和事件的订阅发布来实现，数据劫持指的是Vue通过observer观察者对象对data选项中的数据进行getter和setter设置，事件的订阅发布指的是Vue通过事件来监听，通知Vue进行视图更新。
   • 监听：选项 / watch