Vue3

1.Vue3学习的好处

Vue3到现在为止已经成为Vue默认版本,也就意味着划下了一个新的时代

Vue3 运行的性能提升了很多,也就比之前的速度快1.5倍差不多(🚑 )
Vue3 支持 tree shaking,可以进行按需编译,编译后的文件体积会比Vue2小
Vue3 组合式API 使应用中的功能代码更加聚合,使组件间公共逻辑的抽取容易
Vue3 中提供了更加先进的功能,比如 teleport,suspense ...etc
Vue3 对TypeScript的支持更加友好,对大型前端应用的支持更加友善

官方文档请点击我哦

2.安装相关编辑器vscode插件

以下编辑器如果有跟之前Vue2冲突的进行卸载

Volar: Vue3 语法支持
TypeScript Vue Plugin (Volar)
Vue.js AutoImport: 用于导入 vue 组件
Prettier-Code formatter: 代码格式化
ESLint: 代码质量检查

3.组合式API的优势

组合式API与选项式API区别,优点是什么？

在Options API 中，它将数据和逻辑进行了分离，所有不相关的数据都存放在一起，如果应用规模增加，最后会导致项目维护难度大

export default {
  data:{},
  methods:{},
  computed:{},
  watch:{},
  directives:{}
}

在Composition API 中，它将同个功能的逻辑和数据放在一起，提升代码的聚合性

export default {
  setup() {
    //属性
    //方法
    //计算属性
  }
}

同一个功能的代码可以被抽取到单独的文件中,使维护程度小

export default {
  setup() {
    useFunc_1()
    useFunc_2()
  }
}
function useFunc_1() {}
function useFunc_2() {}

4.Composition API入口

掌握setup 函数的基本使用

setup 函数的执行时机以及 this 指向
setup 函数的返回值的作用及注意事项

setup函数是一个新的组件选项,它被作为组合式API入口

export default {
  setup() {
    
  }
}

setup函数在任何生命周期函数之前执行,且函数内部this为undefined,它不绑定组件实例对象

export default {
  setup() {
    console.log(this) // undefined
  },
  beforeCreate() {
    console.log("before create")
  }
}

setup函数的返回值必须是对象,对象中的属性会被添加到组件实例对象中,所以它们可以在其他选项和模版中使用

export default {
  setup() {
    let name = "张三",
    let age = 20,
    return { name, age }
  },
  beforeCreate() {
    console.log(this.name)
  }
}

<template>{{ name }} --- {{ age }}</template>

注意: 在setip方法中声明的变量虽然可以在模版中显示,但它可不是响应式数据,假设数据被更新后是不会在渲染模版中更新

export default {
  setup() {
    let name = "张三",
    let age = 20,
    const onClickHandler = () => {
      name = "李四",
      age = 30
    }
    return { name, age, onClickHandler }
  }
}

<template>
  {{ name }} --- {{ age }}
  <button @click="onClickHandler">
    点击修改
  </button>
</template>

5.创建响应式数据 ref

掌握使用 ref 方法创建，修改数据源

使用ref 方法创建基本数据类型的响应式数据

import { ref } from 'vue'
export default {
  setup() {
    const name = ref("张三")
    const age = ref(20)
    return { name, age }
  }
}

使用ref创建的数据在模版中可以直接使用

<template>{{ name }} --- {{ age }}</template>

在JavaScript中通过 value属性修改数据

export default {
  setup() {
    const name = ref("张三")
    const age = ref(20)
    const onClickHandler = () => {
      name.value = "李四",
      age.value = 30
    }
    return { name, age }
  }
}

<template>
  {{ name }} | {{ age }} 
  <button @click="onClickHandler">button</button>
</template>·s

使用ref方法创建引用数据类型的响应式数据

export default { 
  setup() {
    const person = ref({name:"张三",age:30});
     const onClickHandler = () => {
      person.value.name = "王五"
      person.value.age = 50
      // 重新为 person 赋值也是可以的
      // person.value = {name: '李四', age: 40}
    }
    return { person, onClickHandler }
  }
}

<template>
  {{ person.name }} | {{ person.age }}
  <button @click="onClickHandler">button</button>
</template>

6.创建响应式数据 reactive

区别reactive 和 ref 不同点

reactive 方法用来创建响应式数据，创建基于引用数据类型的响应式数据。

使用 reactive 方法创建基于引用数据类型的响应式数据。

import { reactive } from 'vue';
export default {
  setup() {
    const person = reactive({name:"张三",age:20})
    const onClickHandler = () =>{
      person.name = "李四",
      person.age = 40
    }
    return {person,onClickHandler }
  }
}

<template>
  {{ person.name }} | {{ person.age }}
  <button @click="onClickHandler">button</button>
</template>

reactive 方法只能创建基于引用数据类型的响应式数据，对于基本数据类型它是不起作用的。

export default {
  setup() {
    let name = reactive("张三")
    const onClickHandler = () => {
      // name = "李四"
      // name.value = "李四"
      name = reactive("李四")
    }
    return { name, onClickHandler }
  },
}

小案例:

//点击按钮就把 reactive里面的引用数据类型
export default {
  name: 'App',
  setup () {
    let person = reactive({name: '张三', age: 30})
    const newPerson = {name: '李四', age: 50}
    const onClickHandler = () => {
      for (const attr in newPerson) {
        person[attr] = newPerson[attr]
      }
    }
    return {person, onClickHandler}
  }
}
javascript

小总结:

ref 既可以创建基于基本数据类型的响应式数据也可以创建基于引用数据类型的响应式数据，reactive 只用于创建基于引用数据类型的响应式数据。

ref 在 JS 中使用时需要点上 value, 而 reactive 在 JS 中使用时不需要点上 value，在模板中使用时都不需要加 value。

ref 创建的响应式数据可以被直接整体赋值，而 reactive 创建的响应式数据不可以，若要整体赋值需要使用遍历的方式。

Vue3基础之创建响应式数据