vue3基本使用

1、vue3.0生命周期钩子函数

• setup 创建实例前
• onBeforeMount 挂载DOM前
• onMounted 挂载DOM后
• onBeforeUpdate 更新组件前
• onUpdated 更新组件后
• onBeforeUnmount 卸载销毁前
• onUnmounted 卸载销毁后

2、组合API-setup函数

使用细节：

• setup 是一个新的组件选项，作为组件中使用组合API的起点。
• 从组件生命周期来看，它的执行在组件实例创建之前vue2.x的beforeCreate执行。
• 这就意味着在setup函数中 this 还不是组件实例，this 此时是 undefined
• 在模版中需要使用的数据和函数，需要在 setup 返回。

3、组合API-生命周期

4、组合API-reactive函数

定义响应式数据：

• reactuve是一个函数，它可以定义一个复杂数据类型，成为响应式数据
• 通常是用来定义响应式对象数据

5、组合API-toRef函数

定义响应式数据：

• toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。

使用场景：有一个响应式对象数据，但是模版中只需要使用其中一项数据。

toRefs

定义响应式数据：

• toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的

6、组合API-ref函数

定义响应式数据：

• ref函数，常用于简单数据类型定义为响应式数据
  • 再修改值，获取值的时候，需要.value
  • 在模板中使用ref申明的响应式数据，可以省略.value

7、知识运用案例

基本步骤：

• 记录鼠标坐标
  • 定义一个响应式数据对象，包含x和y属性。
  • 在组件渲染完毕后，监听document的鼠标移动事件
  • 指定move函数为事件对应方法，在函数中修改坐标
  • 在setup返回数据，模版中使用
• 累加1功能
  • 定义一个简单数据类型的响应式数据
  • 定义一个修改数字的方法
  • 在setup返回数据和函数，模板中使用

8、组合API-computed函数

定义计算属性：

• computed函数，是用来定义计算属性的，计算属性不能修改。

高级写法

9、组合API-watch函数

定义计算属性：

• watch函数，是用来定义侦听器的

监听ref定义的响应式数据

监听多个响应式数据数据

监听reactive定义的响应式数据

监听reactive定义的响应式数据，某一个属性

深度监听

默认执行

10、组合API-ref属性

获取DOM或者组件实例可以使用ref属性，写法和vue2.0需要区分开

11、组合API-父子通讯

12、组合API-依赖注入

13、补充-v-model语法糖

在vue2.0中v-mode语法糖简写的代码

在vue3.0中v-model语法糖有所调整：

总结： vue3.0封装组件支持v-model的时候，父传子:modelValue 子传父 @update:modelValue

补充： vue2.0的 xxx.sync 语法糖解析 父传子 :xxx 子传父 @update:xxx 在vue3.0 使用 v-model:xxx 代替。

14、补充-mixins语法

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

全局混入

// main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// vue2.0 Vue.mixin({ 全局混入的选项对象 })
// vue3.0 app.mixin({ 全局混入的选项对象 })
app.mixin({
    // 在任何组件 dom准备好的时候 打印一句话
    methods: {
        say() {
            console.log(this.$el,'dom准备好了');
        }
    },
    mounted() {
        this.say();
    }
})
app.mount('#app');

局部混入

// mixins.js
// 配置对象
export const followMixin =  {
    data () {
      return {
        loading: false
      }
    },
    methods: {
      followFn () {
        this.loading = true
        // 模拟请求
        setTimeout(()=>{
          // 省略请求代码
          this.loading = false
        },2000)
      }
    }
}

15、vuex

全局使用方法

import { createStore } from 'vuex'

// vue2.0 创建仓库 new Vuex.Store({})
// vue3.0 创建仓库 createStore({})
export default createStore({
  state: {
    username: 'zs'
  },
  getters: {
    newName(state) {
      return state.username + '!!!'
    }
  },
  mutations: {
    updateName(state, payload) {
      state.username = payload
    }
  },
  actions: {
    updateName(ctx) {
      // 发送请求
      setTimeout(() => {
        ctx.commit('updateName', 'ls')
      }, 1000)
    }
  },
  modules: {
  }
})

分模块使用

• 存在两种情况
  • 默认的模块，state 区分模块，其他 getters mutations actions 都在全局。
  • 带命名空间 namespaced: true 的模块，所有功能区分模块，更高封装度和复用。

import { createStore } from 'vuex'

// A模块
const moduleA = {
  state: {
    username: 'moduleA'
  },
  getters: {
    newName(state) {
      return state.username + '!!!'
    }
  },
  mutations: {
    updateName(state) {
      state.username = 'moduleAAAAAA'
    }
  }
}

// B模块
const moduleB = {
  namespaced: true,
  state: {
    username: 'moduleB'
  },
  getters: {
    newName(state) {
      return state.username + '!!!'
    }
  },
  mutations: {
    updateName(state, payload) {
      state.username = payload
    }
  },
  actions: {
    updateName(ctx) {
      // 发送请求
      setTimeout(() => {
        ctx.commit('updateName', 'zs')
      }, 1000)
    }
  }
}

export default createStore({
  modules: {
    moduleA,
    moduleB
  }
})

16、vuex持久化插件

• npm i vuex-persistedstate

• store 里面配置

  import { createStore } from 'vuex'
  +import createPersistedstate from 'vuex-persistedstate'
  
  import user from './modules/user'
  import cart from './modules/cart'
  import category from './modules/category'
  
  export default createStore({
    modules: {
      user,
      cart,
      category
    },
  +  plugins: [
  +    createPersistedstate({
  +      key: 'erabbit-client-pc-store',
  +      paths: ['user', 'cart']
  +    })
  +  ]
  })
  

• 使用

  // 用户模块
  export default {
    namespaced: true,
    state () {
      return {
        // 用户信息
        profile: {
          id: '',
          avatar: '',
          nickname: '',
          account: '',
          mobile: '',
          token: ''
        }
      }
    },
    mutations: {
      // 修改用户信息，payload就是用户信息对象
      setUser (state, payload) {
        state.profile = payload
      }
    }
  }