Vue特点、使用和实例；MVVM；双向绑定原理

Vue基础

渐进式

vue是渐进式JavaScript框架 用到什么功能，只需要引入什么功能模块

• 如果只是简单的将数据与视图进行关联渲染，只需要引入vue即可实现声明式渲染
• 如果后续多个地方用到轮播图效果，那么我们可以借助vue的组件化思想进行封装
• 如果要做前端SPA单页路由，需要引入第三方插件vue-router实现路由功能
• 如果涉及多组件之间的状态管理维护，需要引入第三方插件vuex实现状态管控
• 如果项目最终上线、团队开发等需要引入webpack等构建工具进行项目打包、构建、迭代操作

主张弱

Vue可以在任意其他类型的项目中使用，使用成本较低，更灵活，主张较弱，在Vue的项目中也可以轻松融汇其他的技术来开发，并且因为Vue的生态系统特别庞大，可以找到基本所有类型的工具在vue项目中使用

vue特点

易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好）

MVVM

M：model（数据模型层） V：view（视图层） VM：ViewModel（由前端开发人员组织生成和维护的视图数据层）

你只需要在View的模版语法中，指令式地声明View上的显示的内容是和Model的哪一块数据进行绑定即可。 当ViewModel对Model进行更新的时候，Binder会自动把数据更新到View上去；当用户对View进行操作（例如表单输入），Binder也会自动的把数据更新到Model上去。这种方式称为：双向数据绑定。

vue的双向数据绑定原理原理

​ 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转 为 getter/setter。Object.defineProperty 是 ES5 中一个无法模拟的特性， 这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

​ 简单来说：Vue创建viewModel的时候，会将数据放置在实例中，通过内部的Object.defineProperty的方法，对数据绑定get和set方法。当获取数据的时候，采用get方法；当设置数据的时候，采用set方法；当set方法触发一次后，会进一步通过watcher监听，将更新的数据在视图上进行渲染

​ 再简单点来说：

1. 数据被vm管理，数据劫持，（Object.defineProperty） 动态添加get与set
2. 数据发生改变了 vm.msg = “你好” 触发其自身上面的set方法
3. set触发成功后，数据改变完成了，然后通知watcher触发响应的监听回调

扩展：

注意：Object.defineProperty有一些缺点：

1、对象属性的新加或者删除无法监听；

2、数组元素的增加和删除无法监听

针对Object.defineProperty的缺点，ES6 Proxy都能够完美得解决，它唯一的缺 点就是，对IE不友好,所以vue3在检测到如果是使用IE的情况下（没错，IE11都不支持Proxy），会自动降级为Object.defineProperty的数据监听系统。

Vue的使用

• 可以直接通过script标签来引入vue.js，有开发版本和生产版本，开发版本一般我们在开发项目的时候引入，当最后开发完成上线的时候引入生产版本，开发版本是没有压缩的且有很多提示，而生产版本的提示全部删掉了，不易于开发用（推荐使用开发版）

  直接下载并用

Vue的实例

每一个应用都有一个根实例，在根实例里我们通过组件嵌套来实现大型的应用

也就是说组件不一定是必须的，但是实例是必须要有的

在实例化实例的时候我们可以传入一个配置项，在配置项中设置很多属性方法可以实现复杂的功能

在配置中可以设置el的属性，el属性代表的是此实例的作用范围

在配置中同过设置data属性来为实例绑定数据

<div id="app">
    {{msg}}
</div>
<!--引入开发版本  开发版本给一些警告信息-->
<script src="./base/vue.js"></script>
<script>

    //创建一个vue的实例
    //声明一条数据，然后用特殊的模板与法将其渲染到界面中进行显示  ====> 声明式渲染
    new Vue({  //vue的配置项
        el:"#app",
        data:{ 
            msg:"hello-world"
        }
    })
</script>