vue
Ginger_undefined
这个作者很懒,什么都没留下…
展开
-
image-webpack-loader安装报错pngquant failed to build, make sure that libpng-dev is installed
报错如下:鈥?pngquant pre-build test failedi compiling from source脳 Error: pngquant failed to build, make sure that libpng-dev is installed[npminstall:runscript:error] image-webpack-loader@7.0.1 鈥?imagemin-pngquant@9.0.2 鈥?pngquant-bin@^6.0.0 scripts.postins原创 2021-03-30 19:09:29 · 5585 阅读 · 0 评论 -
$attrs和$listeners及用法
$attrs: 包含了父作用域中不作为prop的绑定属性(class和style除外)。$listeners: 包含父级作用域不含.native修饰符的v-on事件监听器封装一个elementUI的el-input称为myInput$attrs接收多个绑定属性<template> <div> <el-input v-model="inputVal" :diabled = "disabled"></el-input> </div>&原创 2021-03-29 11:32:01 · 356 阅读 · 0 评论 -
Vue.set原理
let data = { a:{ b:1 }}new Observer(data)%%%%%%%%%%%%%%%%%%%%%%%%let data = { a:{ b: 1, __ob__ : {value,dep,vmCount} }, __ob__: {value,dep,vmCount}}我们一步一步来看看这个过程是怎么发生的。step1首先observe(data)function observe(value){ let ob = new Observ原创 2021-03-21 17:10:50 · 390 阅读 · 0 评论 -
vue中如何检测数组的变化
我们知道,Object.defineProperty不能检测数组的操作,因此需要拦截数组的操作(push, unshift, splice等)并重写他们,使之可以对新操作的数据进行检测。拦截数组方法的思路:缓存数组的操作方法,直接缓存Array.prototype就行使用一个代理数组,重写代理数组的操作方法,代理数组的原型指向Array.prototype实例继承代理数组代码实现const arrayProto = Array.prototype // step1const arrayM原创 2021-01-08 15:11:56 · 1330 阅读 · 0 评论 -
vue之虚拟dom及diff算法(一)
当数据变化时,vue是如何更新节点的?渲染真实DOM的开销是很大的,对DOM的操作会引起整个dom树的重绘和重排。因此,vue采用虚拟dom来对节点进行更新。比如当某个div的属性发生变化时,这时候只需要比较变化前的oldVnode和变换后的Vnode,删除多余属性,更新属性或添加新属性,而不需要删除整个dom元素。diff过程diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁虚拟domvirtual DOM 是将真实的DOM的数据抽取出来,以对象的形式模拟原创 2020-10-23 11:19:24 · 208 阅读 · 0 评论 -
vue源码的isUndef函数
function isUndef(v){ return v === undefined || v === null}原创 2020-10-22 21:48:36 · 719 阅读 · 0 评论 -
vue组件注册的几种方式
全局注册核心是使用Vue.component1. 结合vue.extendvue.extend({//包含组件选项的对象}),使用基础构造器创建 组件“子类”var com1 = Vue.extend({ template:'<h3>结合vue.extend创建组件</h3>'})Vue.component("myCom1",com1) //全局注册组件//组件的使用<my-com1></my-com1>2. 直接使用模板创建组件Vu原创 2020-10-16 11:05:20 · 346 阅读 · 0 评论