尝试vue3.0 composition新特性

最新推荐文章于 2024-07-31 23:59:41 发布

fffffff_d

最新推荐文章于 2024-07-31 23:59:41 发布

阅读量833

点赞数

分类专栏：前端 vue js

本文链接：https://blog.csdn.net/dwf_H/article/details/102744495

版权

前端同时被 3 个专栏收录

29 篇文章 1 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

了解有哪些新的特性了解compositionAPI

emmmm,想直接调试的大兄得们可以 https://github.com/Janenil/vue3.0-test
克隆下来，安装一下依赖就可以直接上手调试了

// 新的写法
<!DOCTYPE html>
<html lang="en">
<body>
  <div id='app'></div>
</body>
<script src="./dist/vue.global.js"></script>
<script>
const { createApp, reactive, computed } = Vue;

const RootComponent = {
  template: `
    <button @click="increment">
      Count is: {{ state.count }}
    </button>
  `,
  setup() {
    const state = reactive({
      count: 0,
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}

createApp().mount(RootComponent, '#app')
</script>
</html>

生命周期
```
import { onMounted, onUpdated, onUnmounted } from 'vue'

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }
}
```
这些生命周期挂钩注册功能只能在期间同步使用setup()，因为它们依赖于内部全局状态来定位当前活动实例（当前setup()正在被调用的组件实例）。在没有当前活动实例的情况下调用它们将导致错误。
1. 每次数据更新都会触发 onUpdate和onBeforeUpdate
- beforeCreate ->使用 setup()
- created ->使用 setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
新增
- onRenderTracked
- onRenderTriggered
setup

setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。

处于生命周期的哪一块：beforeCreate 之后，create之前
参数props，context：setup中无法访问this

reactiveAPI

等价于 vue 2.x 中的 Vue.observable() 函数，但是为了命名不重复，另外命名为reactive，用来创建响应式的对象
```
const data = reactive({
      a:'test reactive',
      b:{
        c: 123
      }
    })
```

Ref API

根据给定的值来创建响应式的数据对象，返回的是一个对象

 const test = ref('test ref')
 console.log(test) // { value:'test ref' } 
 console.log(test.value) // 'test ref'

 const data = reactive({
      a:'test reactive',
      b:{
        c: 123
      },
      d: test
    })
 console.log(data.d) // test reactive

将ref数据包裹在reactive里面，reactive会自动为其解构，访问时无需通过.value获取数据

isRef

判断某个值是否为ref类型

const unwrapped = isRef(test) ? test.value : test

toRefs

toRefs将reactive的创建出来的响应式对象转化为普通对象，每个属性节点都是ref类型的。

不是很明白这个API的意义是什么。

将普通对象传入toRefs，并不会变成响应式

    const testnormalObj = toRefs({aa:0,bb:'b'})
    const test = ref('test ref')
    const data = reactive({
      a:'test reactive',
      b:{
        c: 123
      },
      d: test
    })
     console.log('reactive',data)
     console.log('torefs reactive',toRefs(data))
     console.log('torefs testnormalObj',toRefs(testnormalObj))

在这里插入图片描述

computed

创建计算属性，computed函数返回的是一个ref实例

// 只读的计算属性
const data_b_c = computed(() => {
  return data.b.c + 100;
})

 // 创建一个 可读可写computed 计算属性
    const plusOne = computed({
      // 取值函数
      get: () => data.b.c + 250,
      // 赋值函数
      set: val => {
        data.b.c += val
      }
    })

Watch

监视某些数据变化，触发一些操作,

watch(() => console.log(data.b.c))
// 监听 ref类型数据
watch(test, (val, oldV)=> {
  console.log('watch ref',val, oldV)
})
// 监听多个ref类型
watch(
  [test, name], // 需要被监视的多个 ref 数据源
  ([count, name], [prevCount, prevName]) => {
    console.log(count)
    console.log(name)
    console.log(prevCount)
    console.log(prevName)
  },
  {
    lazy: true // 在 watch 被创建的时候，不执行回调函数中的代码
  }
)
// 监听reactive数据
watch(() => data.a, (val, oldV)=> {
  console.log('watch reactive',val, oldV)
})

// 创建监视，并得到 停止函数
const stop = watch(() => { /* ... */ })
// 调用停止函数，清除对应的监视
stop()

effect
监听响应式数据，数据更新，触发effect

  effect(() => {
  	console.log('count改变', data.b.c);
  })

refs

可以通过ref（）引用页面的元素

<template>
  <div>
    <div ref="refDiv">TemplateRefOne{{a}}</div>
    <p ref="test-ref">{{test}}</p>
  </div>
</template>
<script>
import { 
  ref, 
  onMounted, 
 } from '@vue/composition-api'
export default {
  setup(props, context) {
    // 创建一个 DOM 引用
    const refDiv = ref(null)
   
    // 在 DOM 首次加载完毕之后，才能获取到元素的引用
    onMounted(() => {
      console.log('onMount!', context)
      // refDiv.value 是原生DOM对象
      refDiv.value.style.fontSize = 40 + 'px'
      context.refs['test-ref'].style.color = 'red'
    })
    
    // 把创建的引用 return 出去
    return {
      refDiv,
    }
  }
}
</script>