Vue的简单认识
一、Vue是一个前端js框架
由前谷歌华人尤雨溪开发
Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vue1.0悄悄的问世了,它的优雅,轻便也吸引了一部分用户,开始收到关注,16年中旬,VUE2.0问世,这个时候vue不管从性能上,还是从成本上都隐隐超过了react,火的一塌糊涂。
学习vue是现在前端开发者必备的一个技能。
二、渐进式
vue是渐进式JavaScript框架 用到什么功能,只需要引入什么功能模块
如果只是简单的将数据与视图进行关联渲染,只需要引入vue即可实现声明式渲染
如果后续多个地方用到轮播图效果,那么我们可以借助vue的组件化思想进行封装
如果要做前端SPA单页路由,需要引入第三方插件vue-router实现路由功能
如果涉及多组件之间的状态管理维护,需要引入第三方插件vuex实现状态管控
如果项目最终上线、团队开发等需要引入webpack等构建工具进行项目打包、构建、迭代操作
三、主张弱
Vue可以在任意其他类型的项目中使用,使用成本较低,更灵活,主张较弱,在Vue的项目中也可以轻松融汇其他的技术来开发,并且因为Vue的生态系统特别庞大,可以找到基本所有类型的工具在vue项目中使用
四、vue特点
易用(使用成本低),灵活(生态系统完善,适用于任何规模的项目),高效(体积小,优化好,性能好)
Vue的使用
Vue不支持IE8,因为使用了ES5的很多特性
Object.defineProperty(_data,“msg”,{get(),set()})
可以直接通过script标签来引入vue.js,有开发版本和生产版本,开发版本一般我们在开发项目的时候引入,当最后开发完成上线的时候引入生产版本,开发版本没有压缩的,并且有很多提示,而生产版本全部删掉了
直接下载并用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
在Vue中提供了一个脚手架(命令行工具)可以帮我们快速的搭建基于webpack的开发环境…
npm install ‐g @vue/cli
Vue的实例
每一个应用都有一个根实例,在根实例里我们通过组件嵌套来实现大型的应用
也就是说组件不一定是必须的,但是实例是必须要有的
在实例化实例的时候我们可以传入一个配置对象,在配置对象中设置很多属性方法可以实现复杂的功能
在配置中可以设置el的属性,el属性代表的是此实例的作用范围
在配置中同过设置data属性来为实例绑定数据
//定义一个数据 也就是Model层
var data = {
title: "今天天气很冷,大家要多穿衣服"
}
// 将视图与数据进行绑定
var vue = new Vue({
// 这个对象是一个配置对象
el: "#app", // 挂载点
data
})
vue的双向数据绑定原理
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转 为 getter/setter。Object.defineProperty 是 ES5 中一个无法模拟的特性, 这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。 每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。
vue在创建vm的时候,会将数据配置到实例中,然后通过Object.defineProperty方法,为数据动态的添加getter与setter方法。
当获取数据的时候,会触发对应的getter方法,当设置数据的时候,触发对应的setter方法。然后当setter方法触发完成的时候,内部会进一步触发watcher,当数据改变了,视图则更新操作完毕。
vue内部通过数据劫持&发布订阅模式实现数据的双向绑定
通过Object.defineProperty方法对所有的数据进行数据劫持,就是给这些数据动态的添加了getter与setter方法。
在数据变化的时候发布消息给订阅者(Watcher),触发响应的监听回调。
扩展:
注意:Object.defineProperty有一些缺点:
1、对象属性的新加或者删除无法监听;
2、数组元素的增加和删除无法监听
针对Object.defineProperty的缺点,ES6 Proxy都能够完美得解决,它唯一的缺 点就是,对IE不友好,所以vue3在检测到如果是使用IE的情况下(没错,IE11都不支持Proxy),会自动降级为Object.defineProperty的数据监听系统。
本文地址:https://blog.csdn.net/guodandan1/article/details/110196433