Vue day3

购物车添加
表单也有修饰符
mounted ()写在全局中在页面渲染完毕后自动调用 只在初始的时候调用一次，刷新时，不会再调用
v-model.number 会将值转换为数字
购物车添加数据的时候会存在问题，因为对象数组是一个引用数据类型，如果直接赋值的话就会引用其内存地址，当再次添加数据的时候上次所添加的数据的数据也会跟着改变，因为这两个数据是同一个内存地址

浅拷贝：
只能最外层的对象数组进行拷贝，可以用延展运算符...进行，也可以用 Object.assign(...可以传若干个对象)合并对象进行

数组去重：

let arr = [7, 8, 9, 10, 12, 99, 7, 8, 4, 99];
  arr = [...new Set(arr)];
  console.log(arr);

Object.assign()

let obj = {
      name: "张三",
      age: 11,
    };
    let obj2 = {
      sex: "男",
    };
    let obj3 = Object.assign(obj, obj2);
    console.log(obj3);

异步获取
当vue实例中data数据改变的时候，他会生成虚拟dom，与之前虚拟dom进行比较，然后渲染到真实dom树上面，其需要花费一定的事件，所有vue将其设置成了异步操作
问题：我们在改变数据后，想获取最新的dom时候，获取不了最新的，Vue提供了一个了一个回调，他可以监听当渲染数据完成后，会触发你所定义的回调函数
this.$nextTick(回调函数);

解决闪烁问题
当加载页面的时候,是自上而下的，vue所渲染的模板，会在HTML加载的时候被识别为字符串，等到vue加载完毕后才会解析成vue模板，编译数据
解决方案：
在所要渲染数据的元素，加上一个v-cloak属性，在css中，通过属性选择器[v-cloak],将元素的display改成none

<style>
    [v-cloak]{
      display: none;
    }
</style>
<div v-cloak>
    {{msg}}
</div>

原理：Vue会在加载完毕时会将这个v-cloak属性给自动去除

侦听器
监听vue实例中的数据变化（data中的数据）
功能：当这个数据变化时，可以监听到（有一个函数会自动运行）
使用：

watch: {
          //要监听data中的那个数据(基础数据类型)，就写个与数据同名的方法，有两个参数，一个变化后的值，一个变化前的值
          firstname(newval, oldval) {
            //
            this.fullname = newval + this.lastname;
          },
          lastname(newval, oldval) {
            console.log(newval, oldval);
            this.fullname = this.firstname + "." + newval;
          },
}

监听对象数组这类引用数据类型，不能直接监听到，因为你监听的是其内存地址，对象属性改变只是改变属性的值，内存地址不变
解决方案：
1.监听对象的某个属性，vue语法规定obj.属性会报错，需要加上引号

"obj.name"(newval, oldval) {
             console.log("哈哈");
           },

2.就监听对象，Vue为我们提供了一个解决方案

obj: {
            handler(newval, oldval) {    //新值和老值相同，原因，和深度无关，其指向的都是一个内存地址
              console.log(newval, oldval);   //值是此对象
            },
            deep: true,   //是否深度监听
          },

计算属性 computed
不宜在视图模板写太多逻辑，这样不易于代码的后期维护
如果一个数据不需要原样渲染，而是要经过一些处理在渲染便可以用到计算属性
其是依赖原数据的，不能直接进行修改，

computed: {
   fullname() {
            return this.firstname + "." + this.lastname;
          },
        }, 

注意 ： 1.不要与data中数据和methods中方法重名否则会被覆盖，其编译出来是Vue实例中的一个属性，和data的数据一样
2.与methods的区别：其会基于其依赖进行缓存，在多吃使用时，当所依赖的数据没变化时，不会重新计算属性，而methods则会执行多次

计算属性可以修改吗
不能直接修改，其实基于依赖的，所以要改变依赖的值

methods: {
          gaibian() {
            this.num1 = 50;
          },
        },
        computed: {
          num1: {          //完整写法，变成一个对象
            set(val) {     //这是你所设置的值
              this.num = 50 / 2;    //改变计算属性的值，要改变依赖值
            },
            get() {
              return this.num * 2;
            },
          },
        },

组件
组件是一个广义的概念，代表页面的独立组成部分
div，span等等都可以属于html自带组件
好处1：提高代码的可复用性

Vue中的组件
注意：1.组件也是Vue的实例（隐式的new Vue），所有实例有的属性和方法组件都有，
2.每个组件都有自己的独立作用域，其内部的数据方法只能在其内部使用
3.不管全局组件还是局部组件都需要在Vue控制范围内使用
1.全局组件：在任意地方或者其他组件中都可以使用
组件命名推荐使用驼峰或者连接符命名
使用全局组件就在Vue控制范围内使用组件名字标签，如果有大写字母要变成小写，驼峰变成连接符“-”，比如myCom1，调用时写成才行
注意：1.组件有且只有一个根元素
2.组件要写在Vue实例前面，因为如果写在Vue实例前面的话，代码自上而下执行，执行到组件代码时，那时Vue实例还未定义，就不会在Vue控制范围内
3.组件的data必须是函数返回对象，因为组件要复用，这样每次函数返回的都是一个新地址

const commonhead1 = {         //模板在外部定义
       template: `
     <div>
     <h1>我是一个全局组件{{num1}}</h1>
     <button @click='add'>加</button>
     </div>
     `,
       data() {
         return {
           num1: 10,
         };
       },
       methods: {
         add() {
           this.num1++;
         },
       },
       watch: {
         num1() {
           console.log("我变化了");
         },
       },
     };
     Vue.component("common", commonhead1);    //注册全局组件

局部组件

const jubu = {
        template: `
        <b>我是局部组件{{num1}}</b>     //局部组件定义要写在注册和调用之前，如果和全局组件同名的数据，优先以作用域小的组件为准
        `,
        data() {
          return {
            num1: 2,
          };
        },
      };
      const commonhead1 = {
        template: `
      <div>
      <h1>我是一个全局组件{{num1}}</h1>
      <button @click='add'>加</button>
      <i>{{chuli}}</i>
      <jubu></jubu>
      </div>
      `,

        data() {
          return {
            num1: 10,
          };
        },
        methods: {
          add() {
            this.num1++;
          },
        },
        watch: {
          num1() {
            console.log("我变化了");
          },
        },
        computed: {
          chuli() {
            return this.num1 * 2;
          },
        },
        components: {       //注册局部组件，在其他组件的 components属性中定义
          jubu,
        },
      };

组件另外两种定义方式

<script id="tpl" type="text/html">
  <div>
    这里写结构
  </div>
</t>
<template id="tpl">
  <div>
    这里写结构
  </div>
</template>

{
  template:'#tpl'
}