vue3学习

最新推荐文章于 2024-05-18 14:56:52 发布

aneyal

最新推荐文章于 2024-05-18 14:56:52 发布

阅读量2.3k

点赞数 4

分类专栏：前端学习文章标签：学习 vue.js vue

本文链接：https://blog.csdn.net/aneyal/article/details/124589448

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

vue3

新版本的vue框架

vue3相对于vue2的优点：性能提高、源码升级、更好地支持TypeScript，有一些新的特性（组合API、新的内置组件等等）

创建

vue3工程的创建有两种：cli脚手架和使用vite创建

脚手架

和创建vue2工程差不多，只不过在创建时选择vue3选项，更常用

vite

vite是新一代的前端构建工具

优势：开发环境中，无需打包，可以快速地冷启动；轻量快速地热重载；真正的按需编译，不再等待整个应用编译完成

使用：首先使用npm init vite-app 工程名字进行创建工程，然后进入工程，然后使用npm install安装依赖，最后使用npm run dev运行

组合式api

setup

vue3中的一个新的配置项，值是一个函数

setup是所有组合式api“表演的舞台”

组件中用到的数据、方法等都要配置在setup中

setup中的函数的返回值可以为对象（对象中的属性和方法在模版中可以直接使用）、渲染函数（可以自定义渲染内容）

<template>
<h1>我是App组件,{{name}}</h1>
</template>

<script>
export default {
  name: 'App',
  setup(){
    let name='i'
    return{
      name
    }
  }
}
</script>

<style>

</style>

注意，vue3中仍可以向下兼容vue2中设置数据和方法的方式，但不建议混合使用，最好使用setup方法设置数据和方法。

注意，vue2方法配置的数据方法等可以访问到setup中的属性和方法，但setup中不能访问到vue2配置的数据和方法。并且如果有重名，setup优先

注意，setup在beforeCreate之前执行，其this是undefined

setup函数有两个参数：props和context。props是一个对象，包含组件外传进来的，且组件中使用props声明了的属性。context是上下文对象，其中有emit，可以使用context.emit触发自定义事件，context中的slot中存储的是父组件中传入的插槽的值，context中的attrs是一个对象，包含组件外传进来的，但没有在props配置中声明的属性

ref函数

在setup中设置数据时，如果直接设置，那么设置出来的不是响应式的数据，对其进行修改之后页面不会立马作出反应。所以需要使用ref()函数将其变为响应式数据，返回引用实现的实例对象

<template>
<!-- vue3中可以不使用一个大的div包裹 -->
<h1>我是App组件,名字是{{name}}，年龄是{{age}},职业是{{work.job}}</h1>
<button @click="change">点击修改年龄名字</button>
</template>

<script>
// 引入ref函数
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    // 使用ref()函数将数据变为响应式数据，返回引用实现的实例对象
    let name=ref('lili')
    let age=ref(18)
    let work=ref({
      job:'student',
      place:"China"
    })
    function change(){
      // 修改数据时，使用.value修改
      name.value='anna'
      age.value=20
      work.value.job='teacher'
    }
    return{
      name,
      age,
      work,
      change
    }
  }
}
</script>

<style>
</style>

注意，ref()接收的数据可以是基本类型，也可以是对象类型

对于基本数据类型的数据，响应式依靠object.defineProperty()的get()和set()实现

对于对象类型的数据，响应式依靠reactive函数实现

reactive函数

定义一个对象类型的响应式数据，注意，是深层次的响应式数据

使用上类似ref()函数

注意，通过reactive函数定义的数据，修改时不像ref要使用.value

reactive通过使用Proxy来实现响应式，并且通过Reflect操作源对象内部的数据

computed

计算属性

可以使用vue2中的computed配置属性设置，但是不推荐

vue3中的方法是引入computed函数，在setup中设置：

<script>
// 引入computed函数
import {computed} from 'vue'
export default {
  name: 'App',
  setup(){
    let f='first'
    let l='last'
    let fullname=computed(()=>{return f+l})
    return{
      fullname,
    }
  }
}
</script>

watch函数

vue3中的watch是一个函数

<template>
<span>{{sum}}</span>
<button @click="sum++">点击加一</button>
<br>
<span>{{sumN}}</span>
<button @click="sumN+='!'">点击加!</button>
</template>

<script>
import {ref,watch} from 'vue'
export default {
  name: 'App',
  setup(){
    let sum=ref(0)
    let sumN=ref('yes')
    // 监视ref定义的一个响应式数据
    // 第三个参数是监视的配置，可以不写
    watch(sum,(newValue,oldValue)=>{
      console.log('sum的值变化了',newValue,oldValue)
    },{immediate:true})
    // 监视ref定义的多个响应式数据
    // newValue,oldValue是数组形式的值
    watch([sum,sumN],(newValue,oldValue)=>{
      console.log('sum、sumN的值变化了',newValue,oldValue)
    })
    return{
      sum,
      sumN,
    }
  }
}
</script>

<style>
</style>

注意，监视使用reactive实现的响应式数据时，无法获取正确的oldValue，并且强制开始深度监视，deep配置无效

当要监视reactive定义的响应式数据中的某个属性时，要以函数形式表示，例如不能写成person.name，应该写为()=>peison.name。但是，特别注意，当属性是对象类型时，需要使用deep配置开启深度监视

监视ref定义的对象类型的响应式数据时，要加上.value，才能实现深度监视

watchEffect函数

也是用于监视，但不指名监视对象，其参数是一个函数，该函数中用到了什么数据，则监视什么数据。

<template>
<span>{{sum}}</span>
<button @click="sum++">点击加一</button>
</template>

<script>
import {ref,watchEffect} from 'vue'
export default {
  name: 'App',
  setup(){
    let sum=ref(0)
    // 监视sum
    watchEffect(()=>{
      const s=sum.value
      console.log('sum改变了,变为',s)
    })
    return{
      sum,
    }
  }
}
</script>

<style>
</style>

watchEffect有点像computed，但computed更注重于计算出来的值，需要返回值，而watchEffect更注意的是过程，不用返回值

toRef()和toRefs()

toRef()：创建一个ref对象，其value值指向另一个对象中的某个属性

用法：const 变量名=toRef(对象名，'属性名')，例如const name1=toRef(person,'name')，创建一个名为name1的ref对象，其指向person对象的name属性，即ref对象name1的value为person对象中name属性的值，并且name1的值修改时，name的值也修改。

toRefs()是toRef()的升级版，toRefs()可以批量处理一个对象中的所有属性

用法：const 变量名=toRefs(对象名),返回的是一个对象

shallowReactive()和shallowRef()

类似饿reactive()和ref()

但shallowReactive()是设置浅层次的响应式数据，即只考虑对象类型中的第一层属性的响应式

shallowRef()只处理基本数据类型的响应式，不进行对象的响应式处理

如果有一个对象数据，结构比较深，但在以后的功能中只变化第一层属性，则可以使用shallowReactive()

如果有一个对象数据，后续功能之中不会修改该对象中的属性，而是生成新的对象来代替，则可以使用shallowRef()

readonly()和shallowReadonly()

readonly：让一个数据变成只读

shallowReadonly：让一个数据变成浅只读，即只让第一层数据只读

toRaw()和markRaw()

toRaw()可以将一个响应式数据变为普通数据，注意，只能是reactive()转换的响应式数据

markRaw()可以标记一个对象，使其不会成为响应式对象

customRef()

创建一个自定义的ref，并对其依赖项跟踪和更新触发显示控制

customRef()的参数是一个函数，该函数返回一个对象，对象中应该有set和get函数，当修改数据时，调用set，读取数据时，调用get。

例子：

...
setup(){
    ...
    //自定义一个名为myref的ref
    function myref(value){
        return customRef((track,trigger)=>{
                return {
                    get(){
                        track()//通知vue追踪数据的改变
                        return value
                    },
                    //newvalue是修改数据时，修改后的数据
                    set(newvalue){
                        value=newvalue
                        trigger()//通知vue重新解析模版
                    }
                }
            }
        )
    }
    //使用自定义的ref
    const test=myref('yes')
    ...
}
...