vue3 基础知识点总结

为啥要学习vue3

1. 市场要求
2. 官方版本默认为v3： 通过npm i vue安装的就是v3的版本

特点:

• 代码量变少
• 分散式维护变成集中式维护
• v3对v2的兼容性很好
  

使用create-vue搭建Vue3项目

create-vue是一个脚手架工具，用来快速创建v3的项目。（Vuecli用来创建v2的项目）

create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应

执行如下命令，这一指令将会安装并执行 create-vue

npm init vue@latest

学习基本语法，可以都选中No

效果图

小结

1. 创建v2项目时使用的脚手架工具是vue cli, 它的底层的打包工具是 webpack，命令是 vue create
   npm install -g @vue/cli → vue create 项目名
2. 创建v3项目时使用的脚手架工具是？它的底层的打包工具是?
   脚手架工具: create-vue;底层的打包工具:vite
3. 创建v3项目的命令是？
   npm init vue@latest

熟悉V3的项目目录和关键文件

package.json
vue的版本是3 + 依赖vite做底层驱动

vite.config.js
配置文件。类似vue2的vue.config.js。
业务文件夹src/main.js

• new Vue() 创建vue的实例对象
• createApp也是用来创建vue的实例对象
• createApp(App).mount(‘#app’) mount(‘#app’)
• 把vue的实例对象挂载在index.html的#app元素上
  App.vue
• script -> template -> style
• script 上的setup是一个特殊的开关：
  a. 打开之后，就可以使用组合式api
  b. 不打开它，就可以继续兼容v2的写法
• template中可以不需要唯一的根元素的区别

小结

组合式API - setup选项

1.setup选项的写法和执行时机

类似于生命周期钩子的写法。

<script>
  export default {
    setup(){
      console.log('setup')
    },
    beforeCreate(){
      console.log('beforeCreate')
    }
  }
</script>

执行时机

在beforeCreate钩子之前执行setup函数

2.setup中写代码的特点

注意：vue3不再推荐使用this.data去定义和修改数据，在setup中，console.log(this)会得到undefined。

问题: 如果要定义很多的数据，在模板中使用，那是不是要：1. 定义很多个数据。2. 写一个长长return？
在v3中不需要，它提供了setup语法糖

3.setup 语法糖

<script setup>
  const message = 'this is message'
  const logMessage = ()=>{
    console.log(message)
  }
</script>
<div>{{message}}</div>
<button @click="logMessage">按钮</button>

拓展-语法糖

小结

组合式API - reactive和ref函数

1. reactive

作用: 接收对象类型数据的参数传入并返回一个响应式的对象

<script setup>
 import { reactive } from 'vue'  // 导入
 const state = reactive({       // 执行函数 传入参数 变量接收
   count:0
 })
 const add = ()=>{
   state.count++ // 修改数据更新视图
 }
</script>
<template>
  <button @click="add">{{state.count}}</button>
</template>

注意: 1. 普通对象不是响应式的，可以正常访问，但是，不具备响应式的特点：修改数据之后，视图不会更新
2. reactive必须要传入一个类型为对象的数据，不支持基本数据类型。 vue提供了更加适用的ref函数。

2. ref

作用: 接收简单类型或对象类型数据的参数传入并返回一个响应式的对象
在

<script setup>
 import { ref } from 'vue' // 导入
 const setCount = ()=>{  // 执行函数 传入参数 变量接收
   console.log(count)
   // 修改数据更新视图必须加上.value
   count.value++
 }
</script>
<template>
  <button @click="setCount">{{count}}</button>
</template>

3. reactive 对比 ref

1. 相同点：都是用来生成响应式数据
2. 不同点
   a. reactive不能处理简单类型的数据
   b. ref参数类型支持更好，但是必须通过.value做访问修改
   c. ref函数内部的实现依赖于reactive函数

组合式API - computed

<template>
  <div>
    初始数据：{{ list }}
  </div>
  <div>
    计算值之后得到的数据：{{ newList }}
  </div>
</template>
<script setup>
  import {ref, computed } from 'vue'
  const list = ref([1,2,3,4,5,6])
  const newList = computed(()=> {
    return list.value.filter(it => it > 2)
  })
  setTimeout(() => {
    list.value.push(7)
  }, 3000)
</script>

组合式API - watch

作用

侦听一个或者多个数据的变化，数据变化时执行回调函数。
俩个额外参数: immediate控制立刻执行，deep开启深度侦听

侦听单个数据

<script setup>
   // 1. 导入watch
  import {ref, watch } from 'vue'
  const count = ref(0)
  const add = () => count.value++
  // 2. 调用watch 侦听变化
  // count: ref参数不需要加.value
  watch(count, (newVal, oldVal) => {
    console.log('旧值为',oldVal,'新值为',newVal )
  })
</script>

侦听多个数据

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('cp')
  // 2. 调用watch 侦听变化
  watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
    console.log(`count或者name变化了，[newCount, newName],[oldCount,oldName])
  })
</script>

立即监听 immediate

在侦听器创建时立即出发回调，响应式数据变化之后继续执行回调

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  // 2. 调用watch 侦听变化
  watch(count, (newValue, oldValue)=>{
    console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
  },{
    immediate: true
  }) 
</script>

组合式APIwatch监听-深度侦听-精准侦听

浅层侦听

通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state
  watch(state, ()=>{
    console.log('数据变化了')
  })
  const changeStateByCount = ()=>{
    // 直接修改不会引发回调执行
    state.value.count++
  }
</script>

//开启deep之后
<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state 并开启deep
  watch(state, ()=>{
    console.log('数据变化了')
  },{deep:true})
  const changeStateByCount = ()=>{
    // 此时修改可以触发回调
    state.value.count++
  }
</script>

开启deep的问题： 它会递归地处理处理所有的值，无论哪个属性被修改都会触发watch回调，这可能会导致不必要的浪费。

精确监听

watch(()=>state.value.name, (newVal, oldVal) => {
    console.log('name变化了')
  })

组合式API - 生命周期函数

与v2对比

v3的变化：

1. 整体的名称用on打头
2. destory → unMount
3. beforeCreate/ created → setup
   生命周期的基本使用

<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{
  // 自定义逻辑
})
</script>

生命周期函数执行多次的时候，会按照顺序依次执行

父子组件通讯另写了一篇文章