vue---data

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)
    }
* */