yuey0809的博客

代码根目录 .env文件打包时会被读取 其中允许的值有三种 // .env NODE_ENV=不推荐修改，vue-cli打包时会根据运行serve还是build修改这个值为development还是production BASE_URL=/ 默认值是"/"，会根据vue.config.js中配置的publicPath中配置的值而改变 VUE_APP_*="*"可以是任何字符，前缀VUE_APP_不能被改变，否则不会被读取 在src目录下使用这些值 process.env.NODE_ENV process.

vue过渡 图解: 只拿了入场动画举例 enter: 表示第一帧 enter-to: 表示第二帧到结束 enter-active:表示整个动画 xxx-move: 在transition-group中使用,当元素位置发生变化时应用该类名 xxx为 name mode: 默认 入场动画与离场动画同时运行, 可选值out-in, in-out ...

弄个假的过滤器 filters: { myFilter(index, other1, other2) { return something }, someFilter(something) { return 1 } } 可使用的位置 大胡子语法中 {{ index | myFilter(other1, other2) }} v-bind中 :index=“index | myFilter(other1, other2)” 几种语法 不附带额外参数 {{ index | myFil

vue实例被创建,在触发beforeCreate之后,会做一些事情,其中就包括对computed的梳理 处理 vue会遍历computed配置的所有属性,为每一个属性创建一个watcher,并传入一个函数,传入的函数本质就是computed配置中的getter,这样一来,getter运行过程中就会收集依赖 在收集依赖的时候,不光会收集这个watcher,还会收集组件的watcher 为计算属性创建的watcher不会立即执行,是因为考虑到该属性是否被使用,如果没被使用,则不会执行,因此在创建watche.

创建 vue实例与创建组件的流程基本一致 首先做一些初始化操作,主要是设置一些私有属性到实例中 运行生命周期钩子函数beforeCreate,此阶段啥也干不了,数据响应式都没有 进入注入流程, 处理属性,computed,methods,data, provide,inject, 最后使用代理模式将它们挂载到实例中 运行生命周期钩子函数created 此时有数据响应式, 没有Dom 生成render函数: 如果有配置,则直接使用配置的render, 如果没有,使用运行时编译,把模板编译成render函数

diff时机 当组件创建时,以及依赖的属性或数据变化时,会运行一个函数,该函数会做两件事 运行_render生成一颗心的虚拟dom树(vnode tree) 运行_update,传入虚拟dom树的根节点,对比新旧两棵树,最终完成真实dom的渲染 //核心代码 var updateComponent = ()=> { this._update(this._redner()) } new Watcher(updateComponent) _update函数 _update函数接收到一个vnode参

核心部件 Observer-观察者 作用: 将一个普通对象转换为一个响应式对象 响应式对象：简单来说就是每个属性都具有getter与setter方法的对象 实现原理: 遍历普通对象,通过Object.defineProperty方法重新定义普通对象中的每个属性,将其转化为响应式对象.数组对象,嵌套对象使用递归实现深层次遍历 该事件发生在beforeCreate与created之间 由于遍历时仅能遍历到对象的当前属性,因此无法检测到将来动态增加或者删除的属性,因此vue提供$set和$delete两个