props : https://www.jianshu.com/p/89bd18e44e73

// 注册组件

  components: {
       iCopyright,buttom
   },

// props类型及默认值
 props: {
     
    demoString: {
      type: String,
      default: ''
    },
    demoNumber: {
      type: Number,
      default: 0
    },
    demoBoolean: {
      type: Boolean,
      default: true
    },
    demoArray: {
      type: Array,
      default: () => []
    },
    demoObject: {
      type: Object,
      default: () => ({})
    },
    demoObject2: {
      type: Object,
      default: function () {
        return {};
      }
    },
    demoFunction: {
      type: Function,
      default: function () { }
    }
  }
  
// 计算属性
computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
  
// ===生命周期事件====
beforeCreate: function() {
    console.log('------beforeCreate创建前状态------');
},
created: function() {
    console.log('------created创建完毕状态------');
},
beforeMount: function() {
    console.log('------beforeMount挂载前状态------');
},
mounted: function() {
    console.log('------mounted 挂载结束状态------');
},
beforeUpdate: function () {
    console.log('beforeUpdate 更新前状态===============》');
},
updated: function () {
    console.log('updated 更新完成状态===============》');
},
beforeDestroy: function () {
    console.log('beforeDestroy 销毁前状态===============》');
},
destroyed: function () {
    console.log('destroyed 销毁完成状态===============》');
},

#vui2

创建项目:

基于webpack模板创建项目的语法是:vue init webpack test1

配置项目

如果创建失败则重新安装一次vue-cli:

cnpm install -gd vue-cli

#vue3
###创建项目:
vue create test3

##全局注册 axios
在main.js 内
import axios form 'axios'

Vue.prototype.$http=axios

tttttttttt

观察变量变化
vm.$watch('a',function(newval,oldval){

})
输出HTML元素: v-html

computed 是属性调用,
带缓存功能
调用方式: 直接名称

methods 是函数调用
调用方式:名字后面加括号

VUE 小技巧

生命周期 @hook

有时在一些业务场景下，需要在父组件监听子组件挂载后mounted, 做一些逻辑处理，一般我们会在每个子组件中去this.$emit事件，我们也可以使用 @hook 来方便的做这个事情。

// 子组件
export default {
    mounted() {
        this.$emit('listenMounted')
    }
}

// 父组件
<template>
    <div>
        <List @listenMounted="listenMounted" />
    </div>
</template>


其实还有一种简洁的方法，使用 @hook 即可监听组件生命周期，组件内无需做任何改变。同样的， created 、 updated 等也可以使用此方法。
<template>
    <Child @hook:mounted="childMounted" />
</template>

动态注册 hook

常见业务场景：

• 使用定时器，生命周期内清除定时器
• 事件监听移除
• 摧毁实例化的对象
  一般我们会这样做

export default {
  created() {
    addEventListener("click", Function, false);
  },

  beforeDestroy() {
    removeEventListener("click", Function, false);
  },
};

避免可能遗忘，我们可以这样

export default {
  mounted() {
    const picker = new Pickaday({
      // ...
    });

    this.$once("hook:beforeDestroy", () => {
      picker.destroy();
    })
  }
};

避免进行数据劫持

Vue 中 data 的数据默认会 Object.defineProperty 对数据进行劫持, 以实现双向数据绑定，若是将大量的和渲染无关的数据直接放置在data中，将会浪费双向数据绑定时所消耗的性能，将这些和渲染无关的数据进行抽离并配合Object.freeze进行处理。

export default {
  data() {
    return {
      tableList: [],
    };
  },

  created() {
    const tableList = [
      { name: "张四", gender: "male", age: "26" },
      { name: "李三", gender: "fmale", age: "24" },
    ];
    this.tableList = Object.freeze(tableList);
  },
};

批量数据更新

一次性更新多个数据时，可使用如下方法一起赋值。

const {name, age, gender} = resData
this = Object.assign(this, {name, age, gender})

watch 监听多个变量

watch本身无法监听多个变量。但我们可以将需要监听的多个变量通过计算属性返回对象，再监听这个对象来实现监听多个变量

export default {
    data() {
        return {
            msg1: 'apple',
            msg2: 'banana'
        }
    },
    compouted: {
        msgObj() {
            const { msg1, msg2 } = this
            return {
                msg1,
                msg2
            }
        }
    },
    watch: {
        msgObj: {
            handler(newVal, oldVal) {
                if (newVal.msg1 != oldVal.msg1) {
                    console.log('msg1 is change')
                }
                if (newVal.msg2 != oldVal.msg2) {
                    console.log('msg2 is change')
                }
            },
            deep: true
        }
    }
}