Vue 3 的优势

• 更容易维护（组合式API）
• 更快的速度
• 更小的体积
• ���优的数据响应

  创建 Vue 3 项目

  • 前提环境条件：已安装 16.0 或更高版本的 Node.js

    node -v

    • 创建一个 Vue 应用（下面的指令将会安装并执行 create-vue ）

      npm init vue@latest

      setup

      组合式API - setup选项

      （）
      • setup 函数在什么时候执行？

        export default {  setup() {    console.log('setup函数比八大钩子中最早执行的beforeCreate函数还要早一点')  },  beforeCreate() {    console.log('我是beforeCreate函数')  }}

        • setup 函数的"原始复杂写法"

          export default {  // 在 setup 的最后加上 return，才能使用 数据 和 函数  setup() {    // 数据    const message = 'hello world'    // 函数    const logMessage = () => {      console.log(message)    }    return {      message,      logMessage    }  }}

          • setup 函数的"语法糖写法"

            // 数据const message = 'hello world'// 函数const logMessage = () => {  console.log(message)}{{ message }}    点我

            reactive

            接收一个对象类型的数据，返回一个响应式的对象

            // reactive：接收一个对象类型的数据，返回一个响应式的对象import { reactive } from 'vue'// 对象类型const state = reactive({  count: 100})// 进行 +1 的函数const setCount = () => {  state.count++}  {{ state.count }}  +1

            ref

            接收简单类型或者对象类型的数据传入并返回一个响应式的对象（推荐统一使用 ref ）

            （）

            // ref：接收简单类型或者对象类型的数据传入并返回一个响应式的对象import { ref } from 'vue'// 简单类型 或者 复杂数据类型const count = ref(100)// 注意：//  1. 在脚本中访问数据，需要通过 .value 的形式//  2. 在template中，.value不需要加const setCount = () => {  count.value++}console.log(count.value)  {{ count }}  +1

            computed

            计算属性函数

            // const 计算属性 = computed(() => {//   return 计算返回结果// })import { computed, ref } from "vue";// 声明数据const list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])console.log(list.value) // 打印list的值// 过滤 >5 的数据const computedList = computed(() => {  return list.value.filter(item => item > 5)})      原始数据：{{ list }}    计算后的数据：{{ computedList }}  

            watch

            作用：监听一个或者多个数据的变化，数据变化时执行回调函数

            import { ref, watch } from "vue";const count = ref(0)const nickname = ref('张三')const changeCount = () => {  count.value++}const changeNickname = () => {  nickname.value += '哈'}// 1. 监视单个数据的变化// watch(ref对象, (newValue, oldValue) => {...})// 2. 监视多个数据的变化// watch([ref对象1, ref对象2], (newArr, oldArr) => {...})  {{ count }}  改数字  {{ nickname }}  改昵称

            immediate

            import { ref, watch } from "vue";const count = ref(0)const nickname = ref('张三')const changeCount = () => {  count.value++}const changeNickname = () => {  nickname.value += '哈'}// immediate 一进入页面就立即执行watch(count, (newValue, oldValue) => {  console.log(newValue, oldValue)}, { immediate: true })  {{ count }}  改数字  {{ nickname }}  改昵称

            deep

            • 集体式的深度监视，只要有一个变化了就会执行函数

              import { ref, watch } from "vue";const count = ref(0)const nickname = ref('张三')const changeCount = () => {  count.value++}const changeNickname = () => {  nickname.value += '哈'}// deep 深度监视，默认 watch 进行的是浅层监视//      const ref1 = ref(简单类型)  可以直接监视//      const ref2 = ref(复杂类型)  监视不到复杂类型内部数据的变化watch(count, (newValue, oldValue) => {  console.log(newValue, oldValue)}, {  immediate: true,  deep: true})  {{ count }}  改数字  {{ nickname }}  改昵称

              • 精确的为某一个元素对象进行深度监视，它变化了才会触发函数

                import { ref, watch } from "vue";const userInfo = ref({  name: 'zs',  age: 18})const setUserInfo = () => {  userInfo.value.age++}// 深度监视之"精准定位"watch(() => { userInfo.value.age }, (newValue, oldValue) => {  console.log(newValue, oldValue)})  {{ userInfo.age }}  改年龄

                生命周期

                选项式API	组合式API
                beforeCreate/created	setup
                beforeMount	onBeforeMount
                mount	onMounted
                beforeUpdate	onBeforeUpdate
                updated	onUpdated
                beforeUnmount	onBeforeUnmount
                unmounted	onUnmounted

                import { onMounted } from 'vue';// beforeCreate 和 created 的相关代码一律放在 setup 中const getList = () => {  console.log('发送请求成功')}getList()// 如果有些代码需要在 mounted 生命周期中执行，就调用对应函数onMounted(() => { console.log('mounted生命周期函数 - 逻辑1') })// 可以使用多次 mounted，并不会冲突，它会按顺序执行onMounted(() => { console.log('mounted生命周期函数 - 逻辑2') })  

                父子数据传递

                父级内容

                // 父传子// 1. 给子组件，添加属性的方式传值// 2. 在子组件，通过props接收import { ref } from "vue";import SonCom from '@/components/son-com.vue'   // 局部组件(导入进来就能用)const money = ref(100)const makeMoney = () => {  money.value++}const reduce = () => {  money.value--}      
                这是父组件的地盘
                    
                还是父组件的地盘
                    当前余额: {{ money }}    点击赚钱  

                子级内容

                // 注意：由于写了 setup，所以无法直接配置 props 选项// 所以：此处需要借助于"编译器宏"函数接收子组件传递的数据const props = defineProps({  info: String,  num: Number})console.log(props.info)console.log(props.num)const emit = defineEmits(['reduceMoney'])const payment = () => {  emit('reduceMoney', 5)   // 通过emit触发父组件标签的reduceMoney属性}  我是子组件  {{ info }}{{ num }}   点击消费

                模板引用

                父级内容

                import TestCom from "@/components/test-com.vue";import { onMounted, ref } from "vue";// 模板引用 (可以用来获取dom元素，也可以用来获取组件)// 1. 调用ref函数，生成一个对象const inp = ref(null)// 3. 在加载渲染完DOM后，才能访问到绑定的元素//    这时候我们需要使用到 生命周期钩子函数"onMounted"onMounted(() => {  console.log(inp.value)  // 输出绑定的元素内容   inp.value.focus()       // 实现:进入页面立即聚焦输入框})// 4. 使用同样的方法，获取组件const testRef = ref(null)// 6. 渲染结束后，当用户点击按钮，将触发下面"获取组件的函数"const getCom = () => {  console.log(testRef.value)  // 输出该组件对象  console.log(testRef.value.num)      // 输出该组件对象中的一些数据  console.log(testRef.value.sayHi())  // 输出该组件对象中的一些数据}              点击让输入框聚焦        点击获取组件

                子级内容

                const num = 999const sayHi = () => { console.log('hi') }// 上面定义的数据或方法，在  语法糖下，只能在内部自己使用// 它不会开放给父组件访问// 为了解决这种默认的限制，我们可以通过 defineExpose 编译宏指定哪些属性和方法允许父组件访问defineExpose({  num,  sayHi})  我是用于测试的文本，当前数量: {{ num }}

                跨层传递普通数据

                基本介绍

                • 顶层组件通过 provide 函数提供数据

                  provide('key', 顶层组件中的数据)

                  • 底层组件通过 inject 函数获取数据

                    const message = inject('key')

                    具体演示

                    • 顶层组件

                      import CenterCom from '@/components/center.vue'import { provide, ref } from 'vue'// 1. 跨层级传递"普通数据"provide('theme-color', 'That is pink')// 2. 跨层级传递"响应式数据"const money = ref(999)provide('userMoney', money)// 3. 跨层级传递"函数"const earning = () => { money.value++ }provide('earningFn', earning)      
                      我是顶层组件
                            

                      • 中间层中间

                        import BottomCom from '@/components/bottom.vue'      
                        我是中间层组件
                              

                        • 底层组件

                          import { inject } from 'vue';// 接收顶层组件传递过来的数据const themeColor = inject('theme-color')const money = inject('userMoney')const earning = inject('earningFn')      
                          我是底层组件
                              颜色：{{ themeColor }}    余额：{{ money }}    点我赚钱  

                          Vue3.3 新特性

                          defineOptions

                          在 Vue3.3 中，引入了 defineOption 宏。顾名思义，主要是用来定义 Options API 的选项。可以用 defineOptions 定义任意的选项，props，emit，expose，slots除外，因为这些可以使用 defineProps，defineEmit、defineXXX来做到

                          // 1. defineOptions 里面的代码，与 setup 平级defineOptions({  name: 'LoginIndex',  // ... 这里写更多自定义属性})// 2. 这里写其他需要写在 setup 里面的代码// ...    
                          Hello World

                          defineModel

                          原版的操作

                          • 父级组件

                            import MyInput from "@/components//temp.vue"import { ref } from "vue";const txt = ref('123456')          {{ txt }}  

                            • 子级组件

                              defineProps({  modelValue: String})const emit = defineEmits(['update:modelValue'])  

                              使用 defineModel

                              1. 修改 vite.config.js 配置文件，在 vue( ) 括号里面加上{ script:{ defineModel: true } }，具体如下所示：

                              vue({      script: {        defineModel: true      }    }),

                              1. 重启服务
                              2. 具体使用方法，如下所示

                              import MyInput from "@/components//temp.vue"import { ref } from "vue";const txt = ref('123456')          {{ txt }}  

                              import { defineModel } from "vue";const modelValue = defineModel()  

                              Pinia

                              概念简述

                              Pinia 是 Vue 的最新状态管理工具，是 Vuex 的替代品

                              回顾 Vuex 涉及哪些概念：statemutaionsactionsgettersmodules

                              Pinia 涉及的概念：stateactionsgetters

                              注意：在实际开发项目的时候，关于Pinia的配置，可以在项目创建时自动添加，而手动添加的方式如下：

                              1. 安装 Pinia 包： npm install pinia 或 npm i pinia
                              2. 配置 Pinia：

                              import { createApp } from 'vue'import { createPinia } from 'pinia'  // 导入 Pinia 包import App from './App.vue'const pinia = createPinia()    // 创建 Pinia 实例const app = createApp(App)    // 创建根实例app.use(pinia)    // pinia 插件的安装配置app.mount('#app')   // 视图的挂载

                              基本使用(store)

                              在 src 文件夹下创建一个 store 文件夹，在 store 里面新建一个 js 文件，这里演示为 counter.js

                              import { defineStore } from "pinia"import { computed, ref } from "vue"// 定义store// defineStore(仓库的唯一标识，() => { ... })export const useCounterStore = defineStore('counter', () => {  // 声明数据 state  const count = ref(999)  // 声明操作数据的方法 action  const addCount = () => count.value++  const reduceCount = () => count.value--  // 声明基于数据派生的计算属性 getters  const double = computed(() => count.value * 2)  // 与上面类似  const msg = ref('hello pinia')  const changeMsg = () => { msg.value += '_plus' }  // 返回要被访问的数据  return {    count,    double,    addCount,    reduceCount,    msg,    changeMsg  }})

                              • src/App.vue

                                import Son1Com from "@/components/Son1Com.vue";import Son2Com from "@/components/Son2Com.vue";import { useCounterStore } from "@/store/counter.js"const counterStore = useCounterStore()      
                                我是App.vue根组件 - {{ counterStore.count }} - {{ counterStore.double }}
                                    改变    {{ counterStore.msg }}    
                                

                                • src/components/Son1Com.vue

                                  import { useCounterStore } from "@/store/counter.js"const counterStore = useCounterStore()      
                                  我是Son1Com子组件 - {{ counterStore.count }} +
                                    

                                  • src/components/Son2Com.vue

                                    import { useCounterStore } from "@/store/counter.js"const counterStore = useCounterStore()      
                                    我是Son2Com子组件 - {{ counterStore.count }} -
                                      

                                    异步实现(action)

                                    • src/store/channel.js

                                      import { defineStore } from "pinia"import { ref } from "vue";import axios from "axios"export const useChannelStore = defineStore('channel', () => {  const channelList = ref([])  const getList = async () => {    const res = await axios.get('http://geek.itheima.net/v1_0/channels')        // 解构: 在返回的信息中找到真正需要的数据    const { data: { data: { channels } } } = res    channelList.value = channels  }  return {    channelList,    getList  }})

                                      • src/App.vue

                                        import { useChannelStore } from "@/store/channel.js"const channelStore = useChannelStore()      获取数据频道    
                                        {{ item.name }}
                                            

                                        持久化存储插件

                                        官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/

                                        AI 插件

                                        Github Copilot 插件安装步骤：

                                        • 登录 GitHub，试用 Copilot
                                        • 打开 VScode，搜索并安装插件 Copilot

                                          Github Copilot 插件使用说明：

                                          • 删除键：表示不接受本次 AI 的智能生成代码
                                          • Tab键：表示接收本次 AI 的智能生成代码
                                          • Ctrl + Enter：查看更多方法