Vue
Vue相关内容
日晞
这个作者很懒,什么都没留下…
展开
-
vue渲染过程
1.响应式:由object.definproperty 方法的setter 和getter 方法实现响应监听(发布-订阅者)2.模板编译:将模板编译成render 函数,执行render 函数生成虚拟dom3.path(diff 算法):通过patch 方法进行虚拟dom 的比较, 来更新视图。...原创 2021-10-08 21:36:20 · 101 阅读 · 0 评论 -
diff 算法
1.patch 函数中对新老节点进行比较如果新节点不存在,销毁老节点 如果老节点不存在,直接创建新的节点 相同节点,进入patchVnode 的过程,比较节点内部2.比较两个虚拟节点内部完全相同,返回 vnode 的children 不是textNode,再分成三种情况 有新的children,没有旧children ,创建新的 反之同理 新的children,旧children 都有,执行updateChildren 比较children 的差异(diff 算法核心) 当v原创 2021-10-08 21:31:03 · 100 阅读 · 0 评论 -
v-model 实现原理
<input v-model="val">{{ val }} ===(等价于)<input @input="val = $event.target.value">{{ val }}当触发input事件时,而$event 是当前的事件对象。 $event.target.value指向的是当前的input的值原创 2021-10-08 21:11:45 · 84 阅读 · 0 评论 -
虚拟dom
vue 如何操作dom?使用虚拟dom(vdom)虚拟dom 解决了什么?vdom 使用js 模拟dom, 计算最小操作。(js 计算更快)原创 2021-10-08 20:55:27 · 90 阅读 · 0 评论 -
Vue响应式原理
what? 什么意思指的是data 的数据变化,页面相应发生变化原理Vue 通过数据劫持(Object.defineProperty) 结合 发布者-响应式原理 达到响应式.劫持数据的setter 和getter,当数据发生变化时,发给订阅者...原创 2021-10-08 20:51:56 · 81 阅读 · 0 评论 -
VueX基本使用方法
Vuex作用集中管理项目公共数据为什么不直接创建一个全局变量来代替Vuex?Vuex 是响应式的 Vuex 可以跟踪每一个状态的变化基本使用方法创建state 获取state 中数据的方式: {{ $store.state.count}} 在computed 中定义方法,返回 this.$store.state.count 批量获取state 中的数据 修改state 数据 mutation 和commit 在mutation 中 定义方法:this.$s...原创 2021-10-08 20:41:11 · 135 阅读 · 0 评论 -
Vue——computed和watch的区别
computed:计算属性,依赖其他属性值,当依赖的属性值发生变化时,下一次获取computed 的值才会重新计算computed 的值 有缓存watch观察,类似于数据的监听回调,当监听的数据变化时会执行回调进行后调操作运用场景computed 数值计算,并且需要依赖其他数据,当数据变化时,自动重新计算watch 数据变化时执行异步或开销较大的操作。可以进行异步操作(访问一个api),限制操作频率。...原创 2021-10-08 20:29:58 · 76 阅读 · 0 评论 -
设计模式:观察者模式和发布-订阅模式区别
观察者模式:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。发布-订阅模式:发布-订阅是一种消息范式,消息的发送者(称为发布者)不会将消息直接发送给特定的接收者(称为订阅者)。而是将发布的消息分为不同的类别,无需了解哪些订阅者(如果有的话)可能存在。同样的,订阅者可以表达对一个或多个类别的兴趣,只接收感兴趣的消息,无需了解哪些发布者(如果有的话)存在。...原创 2021-09-29 19:27:17 · 356 阅读 · 0 评论 -
父子之间通信方法
父传子 父:<子组件名 :users = "data"><子组件名/>子: props: { users:{ }} 子传父 子:方法(){ this.$emit('title','ok')} 父:<子组件名 :title = 'show'> </子组件名>show(ok...原创 2021-09-27 21:55:59 · 167 阅读 · 0 评论 -
ajax请求放在哪个生命周期合适?
mounted,这时dom 渲染出来,可以操作dom; 而且ajax 为异步,假如放在前面,那么异步导致created 中断的话,又要重新开始。原创 2021-09-27 21:12:49 · 305 阅读 · 0 评论 -
生命周期都有哪些,父子组件生命周期运行顺序?
生命周期:created:实例创建完成,可访问data、computed、watch、methods上的方法和数据,未挂载到DOM,不能访问到el属性,el属性,ref属性内容为空数组常用于简单的ajax请求,页面的初始化beforeMount:在挂载开始之前被调用,beforeMount之前,会找到对应的template,并编译成render函数mounted:实例挂载到DOM上,此时可以通过DOM API获取到...原创 2021-09-27 21:06:35 · 207 阅读 · 0 评论 -
为什么style标签中加scoped属性
因为页面很多,在style 标签中加scoped 属性,会将此页面的css 样式只针对此页面,更加不会影响其他页面。但是其实也可以每个页面最外面有一个父class, 这样样式也不会影响。原创 2021-09-27 20:44:20 · 400 阅读 · 0 评论 -
Vue 组件中data 为什么是函数?
对象是引用类型,假如data 是对象,那么其他组件也可以改变本组件的data,太多页面了,很容易误改,会造成事故。而data 是函数的话,相当于每个组件都有一个自己私有的data, 这样更加安全。原创 2021-09-27 20:40:41 · 69 阅读 · 0 评论 -
keepalive的作用和使用方法
keepalive 下的组件会被缓存当时的状态可以提升性能,避免重复加载一些不需要经常变动且内容较多的组件include- 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max- 数字。最多可以缓存多少组件实例。activated和deactivated这两个生命周期钩子函数将会被对应执行。最常用于加在router.js 中加meta 属性:keepalive:true;...原创 2021-09-27 20:35:37 · 757 阅读 · 0 评论 -
v-for为什么要加key,为什么不能是index?
v-for为什么要加key?因为Vue 是diff 算法,假如有10 个li, 没有key 值的话,其中一个li 改变,那全部都要重新渲染;而有key 的话,它会找到对应的key,随后渲染。为什么不能是index?因为假如是index 的话,你倘若插入一个元素在所有元素的最前面,即下标index = 0,那么所有index 变==> key 变,所有重新渲染。...原创 2021-09-27 20:21:06 · 323 阅读 · 0 评论 -
vue-if 和 vue-show 的区别
共同点:都是控制元素隐藏和显示不同点:v-if: 假如v-if = 'true',则会进行渲染;否则不渲染 v-show: 无论是true,还是false,都被渲染出来了,通过display:none 控制元素隐藏应用:v-if: 切换不频繁,元素内容多,渲染一次需要消耗很多时间 v-show: 切换频繁的元素...原创 2021-09-27 20:14:00 · 223 阅读 · 0 评论 -
手写虚拟DOM结构
<div class="vdom" id="first"> <p>内容</p> <ul> <li>1</li> <li>2</li> </ul> </div> <script> { tag:'div' data: { clssName: 'vdom' i...原创 2021-09-06 15:25:18 · 130 阅读 · 0 评论 -
Vue实现todolist简单版
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2021-09-06 15:18:50 · 167 阅读 · 0 评论