Vue3基础学习

1.vue3基础介绍

1.1 vue3带来的新变化

• 性能提升（渲染更快，diff算法更快，内存占用更少，打包体积更小）
• 更好的Tyoescript支持
• 提供新的写代码的方式：Composition API

 1.2 移除的一些语法

• 移除了$on方法 （eventBus现有实现模式不再支持，可以使用三方插件替代）
• 移除过滤器选项 （插值表达式里不能再使用过滤器filter， 可以使用methods替代）
• 移除 .sync语法（v-bind时不能使用.sync修饰符了，现在它v-model语法合并了）

 2.组合式API和选项式API

2.1 Vue2选项式API(option api)

优点：简单，好上手，各司其职

缺点： 代码零散，不方便功能复用

2.2 Vue3组合式API(composition api)

优点：功能代码组合维护

 3.setup函数

3.1 作用

• setup函数是一个新的组件选项，作为组件中使用组合API的起点。
• setup中不能使用this，this指向undefined。
• setup函数只会在组件初始化的时候执行一次。
• setup函数在beforeCreated生命周期钩子执行之前执行

3.2 执行时机

从组件生命周期来看，它的执行在组件实例创建之前执行（在beforeCreate前），这就意味着setup函数中this还不是组件实例，this此时是undefined。

setup() {
	console.log('setup....', this)
},
beforeCreate() {
	console.log('beforeCreate') // 它比setup迟
}

3.3 参数

• 第一个参数props为一个对象，内部包含了 父组件传递过来的所有prop数据
• 第二个参数context为一个对象，包含了 attrs，slots，emit 属性

setup(props,context) {

}

3.4 返回值

setup函数的返回值是一个对象，在模板中需要使用的数据和函数，需要在这个对象中声明。

4.生命周期

组合API的生命周期钩子有7个，它们都是回调函数的格式。可以多次使用同一个钩子，执行顺序和书写顺序相同

 5.ref函数

因为在setup中返回的数据不是响应式的，这时候就需要 ref 来定义响应式数据。

5.1 步骤

• 从vue框架中导入ref函数
• 在setup函数中调用ref函数并传入数据（简单类型或者复杂类型）
• 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去

5.2 代码

<template>
  <p>姓名：{{name}}, 公司：{{company}}，月薪：{{salary}}</p>
  <button @click="double">月薪double</button>
</template>
<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 定义响应式对象
    const company = ref('DiDi')
    const name = ref('小王')
    const salary = ref(18000)
    
    const double = () => {
      // 在代码中修改(或者获取)值时，需要补上.value
      salary.value *= 2
    }
    return {  
      name, 
      company,
      salary,
      double
    }
  }
}
</script>

5.3 注意

• 在代码中修改（获取）值的时候，需要补上 .value
• 在模板中使用时，可以省略 .value

6.ref属性

6.1 作用

获取子组件（DOM）的引用

6.2 步骤

• 导入ref函数
• 使用ref函数传入null创建 ref对象 => const hRef = ref(null)
• setup中导出

• 模板中通过定义ref属性等于1中创建的ref对象名称建立关联 => <h1 ref="hRef"></h1>

  使用 => hRef.value

6.3 代码演示

<template>
  <div class="container">
    <div ref="dom">我是box</div>
    <button @click="hClick"></button>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1. 获取单个元素

    const dom = ref(null)
    const hClick(()=>{
       console.log(dom.value)
    })
    
    return {dom, hClick}
  }
}
</script>

 7.reactive函数

• ref函数定义的响应式数据在代码中使用要加.value，不是很方便，这时候我们可以使用reactive定义响应式数据。
• reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

7.1 使用步骤

• 导入：从vue框架中导入reactive函数
• 调用：在setup函数中调用reactive函数并将对象数据传入
• 导出：在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去

7.2 代码 

<template>

  <p>姓名：{{stu.name}}, 公司：{{stu.company}}，月薪：{{stu.salary}}</p>
  <button @click="double">月薪double</button>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup () {
    const stu = reactive({
      company: 'DiDi',
      name: '小王'，
      salary：18000
    })

    const double = () => {
      stu.salary *= 2
      console.log('stu.salary', stu.salary)
    }
    return {  
      stu,
      double
    }
  }
}
</script>

8.toRefs函数

8.1 作用

定义转换响应式中所有属性为响应式数据，通常用于解构|展开reactive定义对象， 简化我们的在模板中的使用。

8.2 格式

// 响应式数据：{ 属性1, 属性2 }
let { 属性1, 属性2 } = toRefs(响应式数据)

总结：增强版的结构赋值：在解构对象的同时，保留响应式的特点。

9.如何取舍ref和reactive

• ref函数，常用于将简单数据类型定义为响应式数据

  • 在代码中修改(或者获取)值时，需要补上.value

  • 在模板中使用时，可以省略.value

• reactive函数，常用于将复杂数据类型为响应式数据

10.组合API-computed函数10.1

10.1 作用

根据已有数据生成新的响应式数据

10.2 步骤

1. 从vue框架中导入computed 函数

2. 在setup函数中执行computed函数，并传入一个函数，在函数中定义计算规则，并返回结果

3. 把computed函数调用完的执行结果放到setup的return值对象中

 10.3 格式

import { computed } from 'vue'

const 计算属性名 = computed(() => {
  return 响应式数据相关计算
})

10.4 高级用法

const 计算属性 =  computed({
  get () {
    // 当获取值自动调用
  },
  set (val) {
    // 当设置值自动调用，val会自动传入
  }
})

11.组合API-watch函数

11.1 作用

基于响应式数据的变化执行回调逻辑，和vue2中的watch的应用场景完全一致。

11.2 步骤

1. 从vue框架中导入watch函数

2. 在setup函数中执行watch函数开启对响应式数据的监听

 watch函数接收三个常规参数：

1. 第一个参数是：

   对象，要监听的响应式数据

   数组，每个元素是响应式数据

   函数，返回你要监听变化的响应式数据

2. 第二个参数是：响应式数据变化之后要执行的回调函数

3. 第三个参数是: 一个对象，在里面配置是否开启立刻执行或者深度监听