[JavaScript知识库]vue(数据监听原理 表单数据收集)

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()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

用代码简单实现数据监听

 <script type="text/javascript">
      let data = {
        name: "尚硅谷",
        adress: "3333",
      };
      // 简答实现vue底层实现数据监视
      const obs = new Observer(data);
      console.log(obs);
      // 准备一个空对象
      let app = {};
      app._data = data = obs;
      function Observer(obj) {
        // 通过key方法吧对象的属性汇总成一个数组
        const keys = Object.keys(obj);
        keys.forEach((k) => {
          // 传三个参数，对象，属性，属性的方法
          Object.defineProperty(this, k, {
            get() {
              return obj[k];
            },
            // 当数据被修改时，调用set方法，生成虚拟dom重新渲染页面
            set(val) {
              console.log(`${k}我要去工作了`);
              return (obj[k] = val);
            },
          });
        });
      }
    </script>

表单数据收集

<div id="app">
      <!-- 
			收集表单数据：
					若：<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：输入首尾空格过滤
		-->
      <form>
        账号:
        <input type="text" v-model=" info.account" /><br />
        密码：
        <input type="password" v-model.number=" info.password" /><br />
        年龄<input type="number" v-model.number=" info.age" /><br />
        性别 <input type="radio" name="sex" v-model=" info.sex" value="man" />男
        <input
          type="radio"
          name="sex"
          v-model=" info.sex"
          value="woman"
        />女<br />
        爱好： 篮球<input type="checkbox" v-model=" info.hobby" value="篮球" />
        足球<input type="checkbox" v-model=" info.hobby" value="足球" />
        羽毛球<input
          type="checkbox"
          v-model=" info.hobby"
          value="羽毛球"
        /><br />
        其他信息:
        <textarea v-model=" info.text"></textarea><br />
        <input type="checkbox" v-model=" info.agree" />同意协议<a
          href="https://baidu.com"
          >阅读协议</a
        ><br />
        <button @click.prevent="send">提交</button>
      </form>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      const vm = new Vue({
        el: "#app",
        data: {
          info: {
            account: "",
            password: "",
            age: "",
            sex: "woman",
            // checkbox默认监听的是checked，勾选或者不勾选
            // checkbox收集的数据，还和初始值有关，如果初始值是一个空数组，则可以收集到value
            hobby: [],
            text: "",
            agree: "",
          },
        },
        methods: {
          send() {
            console.log(this.info);
          },
        },
      });
    </script>