vue2和vue3的一些技术点复习

一、vue3  

1、父子组件传值

子组件

父组件

2、插槽使用

使用插槽

插槽页面

3、hooks

• vue3 中的 hooks 函数相当于 vue2 里面的 mixin 混入，不同在于 hooks 是函数且显式引入。
• vue3 中的 hooks 函数可以提高代码的复用性，能够在不同的组件当中都利用 hooks 函数。
• hooks 函数可以与 mixin 连用，但是不建议。

建立usePublic.js

import { ref } from 'vue'

export default function() { // 导出一个默认方法

    // 创建一个对象，保存值
    const message = ref("默认消息")

    // 创建一个方法，获取可视化界面的值
    const getMessage = () => {
        message.value = "变化消息";
    }

    return { message, getMessage } // 方法返回值
}

使用hooks

4、vuex

安装依赖

npm install vuex --save

新建store文件->index.js，进行如下配置，在main.js中进行引入

import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
    state() {
        return {
            count: 0
        }
    },
    mutations: {
        increment(state) {
            state.count++
        }
    }
})
export default store;

在app.js中

 在页面中使用

5、生命周期vue2和vue3的对比

vue2           ------->      vue3
 
beforeCreate   -------->      setup(()=>{})
created        -------->      setup(()=>{})
beforeMount    -------->      onBeforeMount(()=>{})
mounted        -------->      onMounted(()=>{})
beforeUpdate   -------->      onBeforeUpdate(()=>{})
updated        -------->      onUpdated(()=>{})
beforeDestroy  -------->      onBeforeUnmount(()=>{})
destroyed      -------->      onUnmounted(()=>{})
activated      -------->      onActivated(()=>{})
deactivated    -------->      onDeactivated(()=>{})
errorCaptured  -------->      onErrorCaptured(()=>{})

二、vue2

1、vue2对已有组件二次封装，例如fes2 input 组件（文档链接）

子组件

父组件引入

2、插槽使用 slot、v-slot、slot-scope

参考此链接

3、mixin

mixins.js

let mixin = {
  created() {
    console.log("我是mixin里面的created!")
  },
  methods: {
    hello() {
      console.log("hello from mixin!")
    }
  }
}
 
export default mixin

页面引入

选项合并：当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。数据对象在内部会进行递归合并，并在发生冲突时以mixin数据优先。

4、vuex

参考此链接

5、生命周期