![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 58
暮春初秋
前端开发
展开
-
vuex简述
1、概念:用户和视图交互更改状态的方式:actions,state:数据源,view:以声明方式将state映射到视图,数据的流向是单向的如下图:2、组件间通信:a.父子组件通信:子组件给父组件传值:props/$emit---在父组件中可以通过@eventa="参数1+=$event"获取值也可以通过正常的函数形参获取值,b.其他组件间传值(自定义事件):常用eventBus其他$parent,$root,$children,$refs等,3、vuex适用场景:a.多个视图以来同一状.原创 2021-11-08 16:25:15 · 315 阅读 · 0 评论 -
Vue 中模板编译的过程。
编译过程入口: src/platforms/web/entry-runtime-with-compile.js如果有render函数,进行render调用,没有render,进行模板转换render函数调用createCompile函数,接收baseCompile函数将模板转换为ast语法树,描述代码结构使用optimize(ast,options)优化抽象语法树将语法树转换为字符串形式的 js 代码最后会返回createCompileToFunction函数,是整个模板编译的入...原创 2021-11-05 16:46:52 · 200 阅读 · 0 评论 -
虚拟 DOM 中 Key 的作用和好处
在前端快速发展的今天,如果不能时刻保持学习就会很快被淘汰。分享一下 Vue 虚拟 DOM 中 Key 的作用和好处。每天进步一点点。1、 使用key可以最大程度的重用DOM,减少查询对比次数以及DOM操作;2、 在具有相同父节点的时候,使用key可以避免渲染错误,最常见的用例是结合 v-for;3、 用于强制替换元素/组件而不是重复使用它,比如给span标签设置key,当文本内容改变, 总是会被替换而不是被修改,因此会触发过渡。在调用 patchVnode 进行新旧节点对比时,如果新旧节点都原创 2021-11-05 16:42:39 · 250 阅读 · 0 评论 -
Vue 响应式原理
1、Vue的实例init()方法中开始的,在init()方法中先调用initState()初始化Vue实例的状态,在initState方法中调用了initData(), initData()是把data属性注入到Vue实例上,并且调用observe(data)将data对象转化成响应式的对象。2、observe是响应式的入口, 在observe(value)中,首先判断传入的参数value是否是对象,如果不是对象直接返回。再判断value对象是否有__ob__这个属性,如果有说明做过了响应式处...原创 2021-11-05 16:12:03 · 97 阅读 · 0 评论 -
实现简易版Vue
// vue.js/**vue 功能:1.负责接收初始化的参数(选项) 2.负责将data中的属性注入到Vue实例,转换成getter/setter 3.负责调用observe监听data中所有属性变化 4.负责调用compiler解析指令/插值表达式* */ class Vue{ constructor(options){ //1.通过属性保存选项数据 this.$options=options.原创 2021-09-03 09:55:03 · 365 阅读 · 0 评论