VUE
LesterWeng
CSDN目前很少更新了,主要更新
Blog: https://github.com/LesterWeng/blog
展开
-
vue 为什么组件的data要写成返回对象的函数
原因:对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题上面解释完,你可能还是不大清楚,下面我们举个简单的例子: // 1.对象方式(所有重用的实例中的data均为同一个对象) var da...原创 2018-09-20 21:44:16 · 4856 阅读 · 0 评论 -
vue scoped style
1. scoped的样式只对当前组件内的元素起作用,原理是会为当前组件的根元素添加一个属性,如data-v1232. scoped的样式会对子组件的根元素起作用(子组件的根元素实际就在父组件的dom中)3. 如果希望scoped的样式能够影响到子组件的非根元素,可使用 深度选择器(>>>),sass、less无法解析,使用 /deep/ 替换即可/* css */...原创 2019-01-21 11:02:41 · 217 阅读 · 0 评论 -
vue 小知识总结
1. v-if用于切换元素(组件)是否存在在切换时元素(组件)及它的数据绑定被销毁并重建,值为false时关闭数据劫持,值为true时开启数据劫持,依据此特性,我们可以达到重新渲染(将当前state变成初始state)的效果<component v-if="isShow"></component>this.isShow = false;this.$nex...原创 2018-12-10 15:11:04 · 176 阅读 · 0 评论 -
vue 组件间通信总结
父-子组件通信1. Props此处不区分是否加引号,若不bind,皆作字符串处理,否则作为表达式处理若传入对象,则子组件上的该对象与父组件中的该对象指向同一个地址,如果希望对传入的对象进行修改且不影响父组件,则需要看情况对其进行深、浅拷贝若传入的属性在父组件中会发生变化,则将其放置在子组件的computed或watch(deep:true)中以检测变化若要根据该属性去修改以此为...原创 2018-12-20 23:29:26 · 167 阅读 · 0 评论 -
vue 两种Object.assign响应式修改对象方式
两种写法1. this.obj = Object.assign({}, this.obj, {k: v})(推荐写法)推荐原因: this.obj可能是父级组件传过来的prop,而为了遵循 单向数据流 的设计理念,不直接修改该数据对象,而是生成一个新的数据对象表达式右侧会生成一个新的对象,this.obj会指向一个新的引用地址(常用于 浅拷贝 对象) 2. this.obj =...原创 2018-09-20 23:26:30 · 11364 阅读 · 0 评论 -
vue(2.x) 响应式修改数据(对象、数组)及难点(坑)
背景1. Vue不能检测对象属性的添加、删除(仅此而已,可直接对该对象重新赋值、修改该对象或内层对象的属性)2. Vue不能检测数组的项修改(根据index)、length修改(仅此而已,可直接对数组重新赋值,如使用filter、map、concat、slice等方式生成新数组对其赋值)对象1. $set、set、$delete、delete// $set是Vue.s...原创 2018-09-20 22:46:19 · 10241 阅读 · 0 评论 -
Vue(2.5.22) 数据劫持、发布-订阅 源码梳理
着重于数据劫持、发布-订阅模式,我们只关注相关的代码1. 从代码入口开始(instance/index)function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor...原创 2019-03-08 16:09:38 · 516 阅读 · 0 评论