data
什么时候为对象?什么时候为函数?
/*
* 当使用new Vue({})时候可以为对象,因为这种方式是生成一个根组件
* 根组件不会复用,就不会存在data数据共享的情况.其他组件的data声明必须为一个函数
* 否则会提出警告,程序无法正常执行
* */
Vue.component('test-comp', {
data: { // vue.js:634 [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.
count: 0 //Property or method "count" is not defined
},
template: `
<button v-on:click="count++">count: {{ count }}</button>`
})
// --------------------------------------------------------------------
Vue.component('test-comp', {
data(){
return {
count:0
}
},
template: `
<button v-on:click="count++">count: {{ count }}</button>`
})
data上的属性为什么是响应式的?data属性所有都是响应式吗?
/*
* vue会递归的把data的属性转化为getter和setter从而实现响应式,但是只有存在的属性才是响应式
* 动态添加的属性不具备响应式。
* */
为什么console.log(vm.$data === data) //true?
/*
* vue实例创建后,实例代理了data上的所有属性
* */
vue实例是如何代理data的?
/*
function proxy(target, sourceKey, key) {
Object.defineProperty(target, key, {
get() {
return this[sourceKey][key]
},
set(val) {
this[sourceKey][key] = val;
} }); }
通过object。defineProperty()的get和set方法实现
tip:以_和$开头的属性不会被代理,因为可能会和内置的属性冲突
* */
如何实现深拷贝?
const data1=JSON.parse(JSON.stringify(data)) //方式之一
data可以写成箭头函数吗?
/*
* 可以,不过this不再指向当前实例,可以显示的传入
* data:vm=>({msg:vm.msg})
* */
vue如何追踪数据变化的?
/*
* 当组件在渲染的过程中触发了属性的getter,每一个组件都有一个watcher,进行依赖收集
* 如果触发了setter,则会通知(notify)watcher,然后组件重新渲染。
* */
data属性定义太多有什么影响?
/*
* 太多的话watcher收集了太多依赖,影响性能。
* */
vue不能检查数组和对象,做了那些操作使之避免?
/*
* 1.对于对象,无法检测属性的添加/移除,因为在实例初始化的时候,对data属性进行了getter和setter
* 的转化,之后添加的属性没有转化。
* 解决办法使用$set()
* person={};
* this.person.age=18
* */
this.$set(this.person,'age',18)
/*
* 如果要动态添加多个属性可以使用object.assign()
* this.person=Object.assign({},this.person,{name:'tom',age:20})
* */
/*
* 2.对于数组,vue重写了数组的一些常用方法,pop(),push(),reverse(),sort(),split()等
* 当通过元素下标去修改数据时,vue无法检测数组的变动
* 2.1 对象数组
* list:[{name:'jack',age:12},{name:'tom',age:23}],
* updateAge(){
this.list[1].age=32 //可以检测到变动
},
* 2.2 一般数组
* list1:['a','ds',23],
* updateArray(){
console.log(this.list1)
// this.list1[2]="修改了" //无法检测
this.$set(this.list1,2,'修改了') //通过$set()可以设置响应式
this.list1.splice(2)
console.log(this.list1)
}
* */