用vs做网站如何连接数据库,做模型挣钱的网站,成品免费观看网站,wordpress相册编辑插件下载一、什么是 Vue ? 首先#xff0c;Vue 是一个 MVVM 框架#xff0c;M -- 模型#xff0c;就是用来定义驱动的数据#xff0c;V -- 视图#xff0c;是经过数据改变后的 html#xff0c;VM -- 框架视图#xff0c;就是用来实现双向绑定的中间桥梁。Vue.js 是采用数据劫持…一、什么是 Vue ? 首先Vue 是一个 MVVM 框架M -- 模型就是用来定义驱动的数据V -- 视图是经过数据改变后的 htmlVM -- 框架视图就是用来实现双向绑定的中间桥梁。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 解析模板指令将模板中的变量替换成数据然后初始化渲染页面视图并将每个指令对应的节点绑定更新函数添加监听数据的订阅者一旦数据有变动收到通知更新视图。  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 方法通过自定义 Rendertemplateel 等生成 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 :keyindex input v-modellist[index] / /div
更多专业前端知识请上
【猿2048】www.mk2048.com
