收集表单数据

 收集表单数据:
 若:<input type="text">,则v-model手机的时value值,用户输入的就是value的值
 若:<input type="radio">,则v-model收集的是value,且要给标签配置value值
 若:<input type="checkbox">
      1.没有配置input的value属性,那么手机的就是checked(勾选or 未勾选,是布尔值)
      2.配置input的value属性:
          (1)v-model的初始值是非数组,那么手机的就是checked(勾选 or 不勾选,是布尔值)
          (2)v-model的初始值是数组,那么手机的就是value组成的数组
      备注:v-model的三个修饰符:
      lazy:失去焦点在收集数据
      number:输入字符串转为有效的数组
      trim:输入首尾空格过滤

vue监测数据改变的原理

1.vue会监视data中所有层次的数据
2.如何检测对象中的数据?
通过setter实现监视,且要在new Vue时就传入要监测的数据.
  (1).对象中后追加的属性,Vue默认不做响应式处理
  (2).如需给后添加的属性做响应式,请使用如下API:
    Vue.set(target,propertyName/index,value)
    vm.$set(target,propertyName/index,value)

    3.如何监测数组中的数据?
      通过包裹数组更新元素的方法实现,本质就是做了两件事:
        (1).调用元素怒哼对应的方法对数组进行更新
        (2).重新解析模板,进行页面渲染.

    4.在Vue修改数组中的某个元素一定要用如下方法:
      (1)使用这些API:push() pop() shift() unshift() reverse() splice() sort()
      (2)Vue.set()或 vm.$set()
      特别注意:Vue.set() 和vm.$set()  不能给vm或者vm的根数据对象添加属性!!!

模拟数据检测原理

let data = {
      name: 'xxxx',
      address: '武汉'
    }
    
    // 创建一个监视的实例对象，用于检测data中属性的变化
    const obs = new Observer(data)
    console.log(obs)
   

    //声明一个vm实例对象
    let vm = {}
    vm._data = data = obs

    function Observer(obj) {
      const keys = Object.keys(obj)
      keys.forEach(k => {
        Object.defineProperty(this, k, {
          get() {
            return obj[k]
          },
          set(val) {
            console.log(`${k}被改了,我要去解析模板,生成虚拟DOM...我要开始忙了`);
            obj[k] = val
          }
        })
      })
    }

列表渲染

v-for(遍历对象遍历数组遍历字符串遍历指定次数)

1.我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<li v-for="item in items" :key="item.message">

2.你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：

<div v-for="item of items"></div>

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

<div v-for="item in items" v-bind:key="item.id"></div>

vue基础知识

收集表单数据

vue监测数据改变的原理

模拟数据检测原理

列表渲染