vue.js核心的示例分析

　　介绍

小编给大家分享一下vue.js核心的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

vue.js是一个提供MVVM数据双向绑定的库,专注于UI层面,核心思想的是:<强>数据驱动,组件系统。

<强>数据驱动:

vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性:getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。

观察家:每一个指令都会有一个对应的用来观测数据的对象,叫做观众,比如v-text=癿sg",{{味精}},即为两个观察者,观察者对象中包含了待渲染的关联DOM元素。

& lt; div id=癮pp"比; 　　{{消息}} 　　& lt;/div> 　　应用var=new Vue ({ 　　艾尔:& # 39;#应用# 39; 　　数据:{ 　　信息:& # 39;你好Vue ! & # 39; 　　} 　　})

<>强基于依赖收集的观测机制原理:

1将原生的数据改造成“可观察对象”,通常为,调用defineProperty改变数据对象中数据为存储器属性。一个可观察对象可以被取值getter,也可以被赋值setter。

2在解析模板,也就是在观察者的求值过程中,每一个被取值的可观察对象都会将当前的观察家注册为自己的一个订阅者,并成为当前观众的一个依赖。

3当一个被依赖的可观察对象被赋值时,它会通知通知所有订阅自己的观察家重新求值,并触发相应的更新,即观察者对象中关联的DOM改变渲染。

依赖收集的优点在于可以精确,主动地追踪数据的变化,不需要手动触发或对作用域中所有观察家都求值(角脏检查实现方式的缺点)。特殊的是,对于数组,需要通过包裹数组的可变方法(比如推)来监听数组的变化。在添加/删除属性,或是修改数组特定位置元素时,也需要调用特定的函数,如obj。添加美元(关键字,值)才能触发更新。这是受ES5的语言特性所限。

<强>组件系统:

应用UI类可以看作全部是由组件树构成的。

注册一个组件:

Vue.component (& # 39; my-component& # 39;, {//模板 　　模板:& # 39;& lt; div>{{味精}}{{privateMsg}} & lt;/div> & # 39;//接受参数 　　道具:{ 　　味精:字符串 　　}，//私有数据,需要在函数中返回以避免多个实例共享一个对象 　　数据:函数(){ 　　返回{ 　　privateMsg: & # 39;组件! & # 39; 　　} 　　} 　　}) 　　& lt;组件味精=癶ello"祝辞& lt;/my-component>

<强>组件的核心选项

1模板(模板):模板声明了数据和最终展现给用户的DOM之间的映射关系。

2初始数据(数据):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。

3接受的外部参数(道具):组件之间通过参数来进行数据的传递和共享。

4方法(方法):对数据的改动操作一般都在组件的方法内进行。

5生命周期钩子函数(生命周期钩子):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。

6私有资源(资产):Vue。js当中将用户自定义的指令,过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

Webpack是一个开源的前端模块构建工具,它提供了强大的装入器API来定义对不同文件格式的预处理逻辑,这是.vue后缀单文件组件形式的基础。所以在此基础上,尤大开发的vue-loader允许将模板、样式,逻辑三要素整合在同一个文件中,以。vue文件后缀形成单文件组件格式、方便项目架构和开发引用。

<强>其他特性:

1异步批量DOM更新:当大量数据变动时,所有受到影响的观察家会被推送到一个队列中,并且每个观察者只会推进队列一次。这个队列会在进程的下一个滴答声异步执行。这个机制可以避免同一个数据多次变动产生的多余DOM操作,也可以保证所有的DOM写操作在一起执行,避免DOM读写切换可能导致的布局。

2动画系统:vue。js提供了简单却强大的动画系统,当一个元素的可见性变化时,用户不仅可以很简单地定义对应的CSS转换或动画效果,还可以利用丰富的JavaScript钩子函数进行更底层的动画处理。3可扩展性:除了自定义指令,过滤器和组件,Vue。js还提供了灵活的混合机制,让用户可以在多个组件中复用共同的特性。

以上是“vue.js核心的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

vue.js核心的示例分析