vue笔记
这是一个博主对vue特性的一些个人笔记,博主是一个菜鸡,请慎重参考
bulibuluo
我是个机器人
展开
-
Vue的templeta编译
1.template模板经过compiler编译产生render函数和AST 2.编译器由createCompiler函数产生,在parse方法内使用正则匹配的方式解析template字符串原创 2020-09-09 17:18:27 · 201 阅读 · 0 评论 -
从源码角度解析Vue重排与重绘
众所周知,Vue通过数据绑定来修改视图,当某个数据被修改的时候,set方法会让闭包中的Dep调用notify通知所有订阅者Watcher,Watcher通过get方法执行vm._update(...),进而去更新视图。 在vm._update(...)中,Vue会调用patch(...)(vdom/patch.js第659行左右),将新产生的vnode与数据未变更之前的旧的prevVnode进行对比。 在patch(...)方法中,Vue通过sameVnode(...)(vdom/patch.js第42行左原创 2020-08-14 15:18:41 · 1248 阅读 · 0 评论 -
使用Vue时踩过的坑
1.当你创建一个Vue组件时,Vue提供了很多的选项,例如data、methods等等,当选项或选项值要求一个函数时,不要使用箭头函数,箭头函数会导致this绑定丢失,不再指向Vue实例。原创 2020-07-31 14:49:30 · 84 阅读 · 0 评论 -
vue自定义事件与组件传值
在vue中,除了click、mouseleave ...等原生事件,vue还支持自定义事件。 自定义事件应该分为三步: 1、声明自定义事件 2、监听自定义事件 3、触发自定义事件 在vue中,声明和监听自定义事件被合为一个步骤,即使用$on(eventName,callback)同时声明和监听; 触发事件则使用$emit(eventName[,...arg]),...arg是传递给监听回调callback的参数列表 组件传值分为三种:父子、子父以及兄弟 父子传值:父子传值较为容易,只需在父组件内为子组件标签原创 2020-06-29 19:39:55 · 1408 阅读 · 0 评论 -
Vue的渲染函数
在vue中,我们可以通过三种方法来创建虚拟DOM:el,template,render el 的值是一个在Vue实例之外定义的模板,将模板的 id 当做值传递给 el,在编译时,Vue会使用 Vue.compile(...)自动将对应的模板转换为 render 函数,进而渲染出虚拟DOM; template 的值是字符串—— html 形式的字符串,其编译过程与 el 相同; render 的值是一个函数,该函数的返回值是一个通过 createElement(...) 创建的虚拟DOM; 三者中的两者或原创 2020-06-27 17:43:16 · 191 阅读 · 0 评论 -
Vue生命周期
beforeCreated: 当这个钩子函数被触发时,Vue实例刚刚初始化,data内property还没有挂载到实例对象上,所以Vue的响应式系统 Watcher 内还未添加属性 created:当这个钩子函数被触发时,data内的property已经挂在到Vue实例上,即是说 Watcher 内已经挂在了响应式数据,但是模板尚未渲染 beforeMounted:当这个钩子函数被触发时,虚拟DOM结构已经构建出来,但是 Watcher 还没有将响应式数据渲染到对应位置 mounted:当这个钩子函数...原创 2020-06-23 23:49:14 · 59 阅读 · 0 评论 -
深入vue的响应式原理
在了解Vue的响应式原理之前,建议先去了解一下观察者模式(Observer) 在Vue中,将状态机data挂载到Vue实例上的过程分为两步: 1、遍历data对象获取property 2、通过ES5的 Object.definedProperty(…) 方法将data的propoty转换成 setter/getter 的形式,挂载到Vue 实例上。 在Vue中,每一个Vue实例都拥有一个 Watcher(观察者) 对象,当视图使用了Vue实例上的数据property时,会触发getter方法,原创 2020-06-22 23:12:49 · 95 阅读 · 0 评论 -
关于vuex的个人见解
vuex包括五大核心配置项:state、getter、mutations、action、module getter选项和Vue对象的computed配置项的用法一样,一般用于处理需要大量计算的属性原创 2020-06-22 22:10:52 · 110 阅读 · 0 评论 -
对vue-router以及导航守卫的理解
vue-router是vue框架的一个插件,主要处理路由的跳转,其返回值是一个构造函数,接收一个描述对象作为参数,描述对象有一个必选属性routes——一个由route配置对象组成的数组,其余选项均为可选,具体参考官网API。 route配置对象包括很多选项: path: string, //匹配路由 component?: Component, //匹配路由成功时要渲染的组件标识 name?: string, // 命名路由,一般配合<keep-alive>使用 components?: {原创 2020-06-21 19:47:43 · 315 阅读 · 0 评论