vue3入门

为啥要学习vue3

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

Vue3体验

image.png

通过 Counter 案例 体验Vue3新引入的组合式API

v2语法的代码

<script>
export default {
  data(){
    return {
      count:0
    }
  },
  methods:{
    add(){
      this.count++
    }
  }
}
</script>

v3的语法

<script setup>
import { ref } from 'vue'
const count = ref(0)
const add = ()=> count.value++
</script>

特点

image.png

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

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。

Vue3更多的优势

image.png

使用create-vue搭建Vue3项目

认识create-vue

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

https://cli.vuejs.org/zh/guide/

image.png

image.png

使用create-vue创建项目

前置条件 - 已安装16.0或更高版本的Node.js

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

创建v3的项目的命令
npm init vue@latest

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

image.png

效果

image.png

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

image.png

组合式API - setup选项

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

格式

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

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

执行时机

在beforeCreate钩子之前执行setup函数

image.png

2. setup中写代码的特点

在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用。

image.png

<script>
  export default {
    setup(){
      const message = 'this is message'
      const logMessage = ()=>{
        console.log(message)
      }
      // 必须return才可以
      return {
        message,
        logMessage
      }
    }
  }
</script>

注意：vue3不再推荐使用this.data去定义和修改数据，在setup中，console.log(this)会得到undefined。
问题：
如果要定义很多的数据，在模板中使用，那是不是要：1. 定义很多个数据。2. 写一个长长return？不需要，在v3中，它提供了setup语法糖

3. script setup 语法糖

script标签添加 setup标记，不需要再写return语句，默认会添加return语句

image.png

更改代码如下：

<script setup>
  const message = 'this is message'
  const logMessage = ()=>{
    console.log(message)
  }
</script>

拓展-语法糖
play.vuejs.org

image.png

组合式API - reactive和ref函数

1. reactive

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

1. 从vue包中导入reactive函数
2. 在<script setup>中执行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

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

1. 从vue包中导入ref函数
2. 在<script setup>中执行ref函数并传入初始值，使用变量接收返回值
   a. 在模板中使用数据不需加.value
   b. 在代码中使用数据要加.value
   示例代码

<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. 不同点

3. reactive不能处理简单类型的数据

4. ref参数类型支持更好，但是必须通过.value做访问修改

5. ref函数内部的实现依赖于reactive函数

https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js

function ref -> createRef -> new RefImpl -> constructor -> toReactive -> reactive

组合式API - computed

计算属性基本思想和Vue2保持一致，组合式API下的计算属性只是修改了API写法
步骤

1. 导入computed函数
2. 执行函数在回调参数中return基于响应式数据做计算的值，用变量接收
   格式

<script setup>
// 导入
import { computed } from 'vue'

// 执行函数 变量接收 在回调参数中return计算值
const computedState = computed(() => {
  return 基于响应式数据做计算之后的值
})
</script>

image.png

<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开启深度侦听

基础用法侦听单个数据

步骤：

1. 导入watch函数
2. 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数
   示例

<<template>
  <button @click="add">
    {{ count }}
  </button>
</template>
<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回调，这可能会导致不必要的浪费。

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

精确监听

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

组合式API - 生命周期函数

生命周期函数，从组件的创建到销毁阶段，在特定时间被自动调用的函数。

选项式对比组合式

image.png

v3的变化：

1. 整体的名称用on打头
2. destory → unMount
3. beforeCreate/ created → setup

生命周期函数基本使用

1. 导入生命周期函数
2. 执行生命周期函数，传入回调

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

执行多次

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

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

onMounted(()=>{
  // 自定义逻辑
})
</script>

组合式API-父子通信

父传子

基本思想

1. 父组件中给子组件绑定属性

2. 子组件内部通过props选项接收数据

   
   
   image.png

示意图

image.png

拓展

编译器宏函数 defineProps

sfc

组合式API-子传父

基本思路

1. 父组件中给子组件标签通过@绑定事件

2. 子组件内部通过 emit 方法触发事件
   a. const emit = defineEmits(['事件名1', '事件名2'])
   b. emit('事件名1', 值1)

   
   
   image.png

拓展

defineEmits的工作原理
编译器宏

组合式API - 模版引用

定义
通过ref标识获取真实的dom对象或者组件实例对象

image.png

基本使用-普通元素

实现步骤:

1. 调用ref函数生成一个ref对象
2. 通过ref标识绑定ref对象到标签
3. 组件挂载完成之后，可以拿到值

<script setup>
    import { onMounted, ref } from 'vue'
    // 1. 调用ref函数得到ref对象
    const refDiv = ref(null)
    
    // 3. 组件挂载完成之后，可以拿到值
    onMounted(() => {
        console.log(refDiv.value)
    }) 

</script>
<template>
    <!-- 2. 通过ref标识绑定ref对象 -->
    <div ref="refDiv">标题</div>
</template>

注意，只有当组件挂载完成之后，才能获取到值
进阶使用-组件元素

<script setup>
        import MyCom2 from './my-com2.vue'
    import { onMounted, ref } from 'vue'
    // 1. 调用ref函数得到ref对象
    const refCom2 = ref(null)
    
    // 3. 组件挂载完成之后，可以拿到值
    onMounted(() => {
        console.log('com2', refCom2.value)
    }) 

</script>
<template>
    <!-- 2. 通过ref标识绑定ref对象 -->
    <MyCom2 ref="refCom2" />
</template>

my-com2.vue

<script setup>
  import { ref } from 'vue'
  const num = ref(100)
  
</script>
<template>
    <div>com2内部的数据{{ num  }}</div>
</template>

注意：默认情况下，我们不能通过对组件的引用拿到组件内部的数据

defineExpose

默认情况下在 <setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法容许访问

image.png

说明：指定num属性可以被访问到

组合式API - provide和inject

作用和场景

顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

image.png

跨层传递普通数据

实现步骤

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

2. 底层组件通过 inject 函数接收数据

   
   
   image.png

image.png

跨层传递响应式数据

在调用provide函数时，第二个参数设置为ref对象

image.png

跨层传递方法

顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件的数据

image.png