Vue2
文章平均质量分 51
合法的咸鱼
我太懒了
展开
-
vue-cli环境配置以及router使用history时的小技巧
代码根目录.env文件打包时会被读取其中允许的值有三种// .envNODE_ENV=不推荐修改,vue-cli打包时会根据运行serve还是build修改这个值为development还是productionBASE_URL=/ 默认值是"/",会根据vue.config.js中配置的publicPath中配置的值而改变VUE_APP_*="*"可以是任何字符,前缀VUE_APP_不能被改变,否则不会被读取在src目录下使用这些值process.env.NODE_ENVprocess.原创 2022-03-30 13:59:10 · 472 阅读 · 0 评论 -
vue过渡
vue过渡图解: 只拿了入场动画举例enter: 表示第一帧enter-to: 表示第二帧到结束enter-active:表示整个动画xxx-move: 在transition-group中使用,当元素位置发生变化时应用该类名 xxx为 namemode: 默认 入场动画与离场动画同时运行, 可选值out-in, in-out...原创 2022-03-22 10:26:24 · 105 阅读 · 0 评论 -
vue过滤器
弄个假的过滤器filters: { myFilter(index, other1, other2) { return something }, someFilter(something) { return 1 }}可使用的位置大胡子语法中 {{ index | myFilter(other1, other2) }}v-bind中 :index=“index | myFilter(other1, other2)”几种语法不附带额外参数 {{ index | myFil原创 2022-03-18 10:44:34 · 139 阅读 · 0 评论 -
Vue2计算属性computed
vue实例被创建,在触发beforeCreate之后,会做一些事情,其中就包括对computed的梳理处理vue会遍历computed配置的所有属性,为每一个属性创建一个watcher,并传入一个函数,传入的函数本质就是computed配置中的getter,这样一来,getter运行过程中就会收集依赖在收集依赖的时候,不光会收集这个watcher,还会收集组件的watcher为计算属性创建的watcher不会立即执行,是因为考虑到该属性是否被使用,如果没被使用,则不会执行,因此在创建watche.原创 2022-03-17 11:04:01 · 2415 阅读 · 0 评论 -
vue2生命周期详细过程
创建vue实例与创建组件的流程基本一致首先做一些初始化操作,主要是设置一些私有属性到实例中运行生命周期钩子函数beforeCreate,此阶段啥也干不了,数据响应式都没有进入注入流程, 处理属性,computed,methods,data, provide,inject, 最后使用代理模式将它们挂载到实例中运行生命周期钩子函数created 此时有数据响应式, 没有Dom生成render函数: 如果有配置,则直接使用配置的render, 如果没有,使用运行时编译,把模板编译成render函数原创 2022-03-17 10:11:35 · 856 阅读 · 0 评论 -
vue的diff
diff时机当组件创建时,以及依赖的属性或数据变化时,会运行一个函数,该函数会做两件事运行_render生成一颗心的虚拟dom树(vnode tree)运行_update,传入虚拟dom树的根节点,对比新旧两棵树,最终完成真实dom的渲染//核心代码var updateComponent = ()=> { this._update(this._redner())}new Watcher(updateComponent)_update函数_update函数接收到一个vnode参原创 2022-03-11 11:28:47 · 793 阅读 · 0 评论 -
vue2响应式原理
核心部件Observer-观察者作用: 将一个普通对象转换为一个响应式对象响应式对象:简单来说就是每个属性都具有getter与setter方法的对象实现原理: 遍历普通对象,通过Object.defineProperty方法重新定义普通对象中的每个属性,将其转化为响应式对象.数组对象,嵌套对象使用递归实现深层次遍历该事件发生在beforeCreate与created之间由于遍历时仅能遍历到对象的当前属性,因此无法检测到将来动态增加或者删除的属性,因此vue提供$set和$delete两个原创 2022-03-09 17:02:04 · 1479 阅读 · 0 评论