024.整理几个面试题——关于Data

关于Data

网上收集整理

01. 如何重置Vue中的data？

• 使用：Object.assign(newObj, oldObj)

  • this.$data：获取当前状态下的data
  • this.$options.data()：获取该组件初始状态下的data

  Object.assign(this.$data, this.$options.data())
  
  // 如果只是重置某一个属性
  this.id = this.$options.data().id;
  

02. 组件中的data为什么是函数？

• 这是由于JavaScript的特性所导致的
• 在组件中，data必须以函数的形式存在，不可以是对象
  • 以函数返回值的形式定义，每次复用组件的时候，都会返回一份新的data
  • 而以对象形式定义，所有的组件实例将共用一个data，因为对象是引用类型
• 因此，为了保证组件不同的实例之间的数据不冲突，data必须是一个函数

03. 在Vue实例上挂载属性/方法？

• 在Vue的原型上添加一个属性/方法，这样可以在任意实例上读取

  Vue.prototype.$xx = xx
  

04. class与style动态绑定？

• Class 可以通过对象语法和数组语法进行动态绑定：

  # 对象形式：在对象{}里面的，是具体的class属性值
  <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
  <script>
      export default {
          data: {
              isActive: true,
              hasError: false
          }
      }
  </script>
  
  # 数组形式：在数组[]里面的是一个data属性，这个data属性等于一个class属性值
  <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
  <script>
      export default {
          data: {
              activeClass: 'active',
              errorClass: 'text-danger'
          }
      }
  </script>
  

• Style 也可以通过对象语法和数组语法进行动态绑定

  # 对象形式：对象{}里面的与原生style写法类似，只需要注意使用驼峰命名的属性
  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  <script>
      export default {
          data: {
              activeColor: 'red',
              fontSize: 30
          }
      }
  </script>
  
  # 数组形式：在数组[]里面的是data属性，这个data属性是一个对象，对象内部是具体的样式
  <div v-bind:style="[styleColor, styleSize]"></div>
  <script>
      export default {
          data: {
              styleColor: {
                  color: 'red'
              },
              styleSize:{
                  fontSize:'23px'
              }
          }
      }
  </script>
  

注意：

• 如果动态绑定的样式或属性过多，可直接在data中定义，或使用计算属性的形式

05. computed和watch的区别？

• computed:（计算属性）
  • 当一个属性受多个属性影响的时候就需要用到computed
  • 只有它依赖的属性值发生改变，它才会重新计算
  • 适用场景：进行数值计算时
• watch:（监听器）
  • 当一条数据影响多条数据的时候就需要用watch
  • 适用场景：进行数据变化时的操作、执行异步操作

06. 数组、对象的响应式？

• 由于JavaScript的限制，Vue无法监测到以下变化

  • 直接修改对象的某个属性值：obj.a = 2
  • 直接修改数组项：arr[1] = 1
  • 直接修改数组长度：arr.length = 3

• 解决方法：

  • 对于对象：

    • 直接覆盖整个对象：obj = newObj
    • 使用set方法：Vue.set(obj, key, newValue)

  • 对于数组：

    • 使用数组方法：pop、push、unshift、shift、splice

    • 使用set方法：Vue.set(arr, index, newValue)

07. 如何进行对象数组的监听？

• 分析：

  • Object.defineProperty()在对数据进行劫持时，只能对属性进行数据劫持
  • 不能对整个对象进行劫持，同理无法对数组进行劫持

  因此，Vue 框架是通过遍历数组和递归遍历对象

  从而达到利用 Object.defineProperty() 也能监听对象和数组（部分方法的操作）

• 实现原理：

  • 如果目标是数组
    • 直接使用数组的 splice 方法触发响应式
  • 如果目标是对象
    • 会先判读属性是否存在、对象是否是响应式
    • 最后，如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理
      • defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法

• 具体实现：

  • 在Vue中，使用watch监听器进行监听
  • 而对于数组、对象，需要添加deep:true属性，进行深度监听