对 Vue 的理解(一)

一、什么是 Vue ?

  首先,Vue 是一个 MVVM 框架,M -- 模型,就是用来定义驱动的数据,V -- 视图,是经过数据改变后的 html,VM -- 框架视图,就是用来实现双向绑定的中间桥梁。Vue.js 是采用数据劫持结合发布者-订阅者模式的方法,通过 Object.definePropety() 来接吃个够属性的 setter、getter,在数据变动时发布消息给订阅者,出发相应的监听回调。

二、Vue 的生命周期
创建前:beforeCreate
创建后:created
载入前:beforeMounte
载入后:mounted
更新前:beforeUpdate
更新后:updated
销毁前:beforeDestory
销毁后:destroyed

三、Vue 双向数据绑定原理
1. 对需要 Observer 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和
getter。这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到数据变化。

说明:
* Observer 的数据对象:写在 data() 里面用 return 包裹的数据。
* data() 里面的数据使用 return 包裹,因为使用 return 包裹后数据中变量只在当前的组建生效,不会影响其他组件;不使用 return包裹的数据会在项目的全局可见,会造成全局污染。
* 如果 data 中的数据为对象,则使用 walk 遍历 data 上每个 key,对每个 key 调用 defineRective 来获取该 key 的 set/get 控制权。[defineRective: 设置对象的 key 属性,由watcher 的实例对象进行 get 操作,此时 watcher 的实例对象将被自动添加到 Dep 实例的依赖数组中。在外部操作出发set 时,将通过 Dep 实例的 notify 来通知所有依赖的 watcher 进行更新。]
* 如果 data 中的数据是数组,就使用 ObserverArray 遍历 data,对 data 中的每一个元素调用 Observer 分别进行观察。

2. compile 解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者一旦数据有变动,收到通知,更新视图。
![clipboard.png](/img/bVbcIB9)

3. Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
* 在自身实例化时往属性订阅器(dep)里面添加自己
* 自身必须有一个update()方法
* 待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。

4. MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化
-> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果

四、Vue 初始化工作

1.初始化各方法执行顺序
initLifeCycle(vm) -> initEvents(vm) -> callHook(vm, 'beforeCreated') -> initProps(vm) -> initMethods(vm) -> initData(vm) -> initComputed(vm) -> initWatch(vm) -> callHook(vm, 'created') -> initRender(vm)

2.vue生成实例的过程
- new Vue,执行初始化
- 挂载 $mount 方法,通过自定义 Render,template,el 等生成 Render 函数
- 通过 watcher 监听数据变化
- 当数据发生变化,执行 Render 函数,返回 VNode 对象
- 通过 patch 方法,对比新旧 VNode 对象, 通过 DOM Diff 算法,增加、修改、删除真正的 DOM 元素。

五、Vue 自定义指令

1.格式
全局:
Vue.directive('directiveName', {
inserted: function(el) {
...
},
...
})

局部:
directives: {
inserted: function(el) {
...
},
...
}

2.自定义指令对象的钩子函数(均为可选)

- bind: 指令第一次绑定到元素是调用,只调用一次
- inserted: 被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)
- update: 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前,指令的值可能发生了改变,也可能没有
- componentUpdated: 指令所在组件的 VNode 及其子 VNode 全部更新后调用
- unbind: 指令与元素解绑时调用,只调用一次

3.钩子函数的参数

- el: 指令所绑定的元素,可以用来直接操作 DOM
- binding: 一个对象,包含以下属性
* name - 指令名,不含前缀 v-
* value - 指令的绑定值
* oldValue - 指令绑定的前一个值
* expression - 字符串形式的指令表达式
* arg - 传给指令的参数
* modifiers - 一个包含修饰符的对象
- VNode: 虚拟节点
- oldVnode: 上一个虚拟节点

六、Vue 响应数据变化的几种方法
1.methods: 每次获取都会重新计算求值
2.computed(计算属性,有缓存): 基于数据依赖进行缓存,只有当数据变化时,才会重新求值。(计算属性只有 getter,可以在需要的时候自己设定 setter)。computed 擅长处理的情景:一个数据受多个数据影响。
3.watch: 当需要在数据变化时执行异步操作或者消耗较大的操作时,比较有效。watch 擅长处理的情景:一个数据影响多个数据。
4.v-model: 基于数据双向绑定(对于 v-for 循环列表中的项,需要使用键值)
eg(4):
<div v-for="(item, index) in list" :key="index">
<input v-model="list[index]" />
</div>


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364533.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nginx做前端Proxy时TIME_WAIT过多的问题

我们的DSP系统目前基本非凌晨时段的QPS都在10W以上&#xff0c;我们使用Golang来处理这些HTTP请求&#xff0c;Web服务器的前端用Nginx来做负载均衡&#xff0c;通过Nginx的proxy_pass来与Golang交互。由于nginx代理使用了短链接的方式和后端交互的原因&#xff0c;使得系统TIM…

JDK 8功能的可疑方面

我们大多数使用Java进行开发的人通常都热衷于JDK 8附带的功能和改进。 但是&#xff0c;最近有几篇文章指出了某些功能可能会被滥用和滥用&#xff0c;并可能在将来导致其他问题。 这些功能使我想起了J2SE 5中引入的自动装箱功能&#xff0c;虽然有其有用的情况&#xff0c;但是…

Xshell 基本使用方式 (1) -- 使用Xshell 连接 VMware下的linux系统

在VMware的虚拟机设置下的网络适配器设置成桥接模式&#xff0c;点击确定。 在终端中输入ifconfig命令查看IP 打开Xshell 新建会话 输入刚刚获取的IP地址&#xff0c;我的是219.219.198.225 如果点击右侧的用户身份验证 输入你的linux登录用户名以及密码 点击连接 可以看到已经…

linux 串口 qt,Linux-QT4.7 实现串口通信

在qt5版本以下&#xff0c;想要实现串口通信需要两个集成类&#xff0c;posix_qextserialport 和 qextserialbase&#xff0c;需要的可以移步到 下载点。在posix_qextserialport这个类中关于串口设置的定义很详细&#xff0c;常用的写法一般是Posix_QextSerialPort * myCom;myC…

JS实现2048

2048这个游戏是通过对二维数组的操作来实现的&#xff0c;其算法核心如下&#xff1a; &#xff08;以一行左移为例&#xff09; c从0开始&#xff0c;遍历当前行中的元素&#xff0c;到<CN-1&#xff08;CN是一个常量&#xff0c;表示的是游戏格子的列数&#xff09;结束&a…

django01

Django的下载与基本命令: 1、下载Django&#xff1a; pip3 install django 2、创建一个django project django-admin.py startproject mysite manage.py ----- Django项目里面的工具&#xff0c;通过它可以调用django shell和数据库等。    settings.py ---- 包含了项目的…

Maven和Java多版本模块

介绍 通常&#xff0c;项目具有最低Java版本要求&#xff0c;并且适用于其所有模块。 但是每条规则都有其例外&#xff0c;最近我偶然发现了以下问题。 我的一个开源项目对大多数模块要求使用Java 1.6&#xff0c;除了一个要求1.7版本的项目。 当集成具有与您自己的项目不同的…

鼠标样式设置

<span style"cursor:auto">浏览器设置的光标</span><br /> <span style"cursor:default">默认鼠标箭头</span> <span style"cursor:pointer">一只手的形状</span> <span style"cursor:text&…

如何在linux环境下安装kvm,如何在Linux发行版上安装和配置KVM和Open vSwitch?

在如今多租户模式的数据中心环境下&#xff0c;虚拟化技术正从传统的基于虚拟机管理程序的服务器虚拟化&#xff0c;扩展到网络虚拟化。在这种环境下&#xff0c;基于软件的虚拟交换机通常连同虚拟机管理程序一起部署在服务器上&#xff0c;串联起了不同虚拟机之间传送的流量。…

hanlp中的N最短路径分词

N-最短路径 是中科院分词工具NLPIR进行分词用到的一个重要算法&#xff0c;张华平、刘群老师在论文《基于N-最短路径方法的中文词语粗分模型》中做了比较详细的介绍。该算法算法基本思想很简单&#xff0c;就是给定一待处理字串&#xff0c;根据词典&#xff0c;找出词典中所有…

怎么在ReactNative里面使用Typescript

今天来搞一搞怎么搭建一个可以使用Typescript的ReactNative环境好吧&#xff0c;一句废话不多说&#xff0c;直接开始好吧 1.全局安装create-react-native-app yarn global add create-react-native-app 2.create-react-native-app 你的项目名称 例如&#xff1a;create-r…

如何不使用Java 8默认方法

警告&#xff1a;一旦阅读&#xff0c;您将无法看不到它 我在上一篇博客文章中讨论了默认方法的多重继承&#xff0c;以及它们在编译和运行时的行为。 这周&#xff0c;我将研究如何使用默认方法进行真正的继承&#xff0c;实际上&#xff0c;默认方法并不是为这种方法而设计的…

linux mint 18.3 内核,Linux Mint 18.3 “Sylvia” Cinnamon正式发布上线

Linux Mint创建者Clement Lefebvre今天宣布Linux Mint 18.3 “"Sylvia” Cinnamon和MATE Beta版本正式发布和上线。Linux Mint 18.3基于Ubuntu 16.04 LTS(Xenial Xerus)&#xff0c;搭载Linux Kernel 4.10内核&#xff0c;将持续到2021年获得更新和安全补丁。  Linux Mi…

浏览器兼容问题及解决方案

1.图片间隙 A)div中的图片间隙&#xff08;该bug出现在IE6以及更低版本当中&#xff09; 描述&#xff1a;在div中插入图片时&#xff0c;图片会将div下方撑大三像素 hack1&#xff1a;将</div>和<img>写在一行上 hack2&#xff1a;将<img>转化为块状元素&am…

Java 8星期五:Java 8的阴暗面

在Data Geekery &#xff0c;我们喜欢Java。 而且&#xff0c;由于我们真的很喜欢jOOQ的流畅的API和查询DSL &#xff0c;我们对Java 8将为我们的生态系统带来什么感到非常兴奋。 Java 8星期五 每个星期五&#xff0c;我们都会向您展示一些不错的教程风格的Java 8新功能&#…

SQL,HQL,CQL,JPQL了解

SQL&#xff08;Structured Query Language&#xff09; 是关系数据库查询语言。from后面跟的是“表名”&#xff0c;where后用“表中字段”做条件 HQL&#xff08;Hibernate Query Language&#xff09; 是面向对象的查询&#xff0c;from后面跟的是“表名”&#xff0c;where…

报错集锦

1.在node后端使用express中的multer中间件来实现文件上传时报错 node multer 报错Unexpected field 1 var expressrequire(express); 2 3 var routerexpress.Router(); 4 5 var uploadrequire(...) router.post(/upload,upload.single(fileid)); 原因&&解决&#xff…

shipyard-----------docker容器的可视化管理

shipyard是什么&#xff0c;由题目就可知&#xff0c;是一个对docker进行管理的可视化界面 照此步骤就能完成对shipyard搭建 <ip-of-host>内容要修改成你的docker0的IP地址&#xff0c;不知道的话就ifconfig就好了 如果搭建不成功则是防火墙未开放4001端口&#xff1a;su…

virtualbox怎么共享文件夹 linux,Virtualbox中Ubuntu设置共享文件夹

1、安装增强功能包(Guest Additions)VirtualBox中&#xff0c;选择”设备” -> “安装增强功能”。命令行输入&#xff1a;$ cd /media/VBoxGuestAdditions_4.3.8_RC1$ sudo ./VboxLinuxAdditions.run开始安装工具包&#xff0c;安装完毕后重启虚拟机。2、配置共享文件夹Vir…

Eclipse对Java(TM)8的官方支持

Java开发工具&#xff08;JDT&#xff09;项目的项目负责人Dani Megert今天早些时候宣布了此声明 &#xff1a; Eclipse顶级项目非常自豪地宣布正式支持Java™8。从I20140318-0830开始&#xff0c;所有的Luna&#xff08;4.4&#xff09;构建都包含Eclipse对Java™8的支持。对…