浅谈vue3新特性

287 阅读2分钟

这是我参与新手入门的第3篇文章

1625737680(1).png

Vue3的新特性好久前都想自己总结下了,借此机会,简单整理下。

项目初始化

vue3在初始化项目时就与vue2有着明显区别

// 1.npm i -g @vue/cli
// 2.vue create my-project
// 3.npm install @vue/composition-api -S

// 4.引入main,js
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)

API部分

1.setup方法

setup是vue3.x中新的操作组件属性的方法,它是组件内部暴露出所有的属性和方法的统一API,在beforeCreate 之后 created之前执行

setup(props, ctx) {
    console.log('setup')
  },

有两个参数,props和content。

通过 setup 函数的第一个形参props,接收 props 数据。

setup 函数的第二个形参是一个上下文对象,这个上下文对象中包含了一些有用的属性,这些属性在 vue 2.x 中需要通过 this 才能访问到。

setup(props, ctx) { console.log(ctx) console.log(this) // undefined }

注意:在 setup() 函数中无法访问到 this。

2.reactive

reactive函数接收一个普通函数,返回一个响应式的数据对象。

相当于vue 2.x 中的 Vue.observable() 函数,vue 3.x 中提供了 reactive() 函数,用来创建响应式的数据对象,基本代码示例如下:

  <div>
    <p>{{index}}</p>
    <button @click="index += 1">+1</button>
  </div>
</template>

<script>
import {reactive} from '@vue/composition-api'
export default {
  setup(props, ctx) {
    const state = reactive({ index: 0 })
    state.index += 1
     // setup 函数中将响应式数据对象 return 出去,供 template 使用
    return state
  }
}
</script>

3.ref()函数

ref() 函数用来根据给定的值创建一个响应式的数据对象,ref() 函数调用的返回值是一个对象,这个对象上只包含一个 .value 属性。

4.isRef()

isRef() 用来判断某个值是否为 ref() 创建出来的对象;应用场景:当需要展开某个可能为 ref() 创建出来的值的时候,例:

import { ref, reactive, isRef } from "@vue/composition-api";
export default {
  setup() {
    const unwrapped = isRef(ctx) ? ctx.value : ctx
  }
};

5.toRefs

toRefs() 函数可以将 reactive() 创建出来的响应式对象,转换为普通的对象,只不过,这个对象上的每个属性节点,都是 ref() 类型的响应式数据。

6.computed计算属性

只读的计算属性:

  <div>
    <h3>04.computed.vue文件</h3>
    <p>refCount: {{refCount}}</p>
    <p>计算属性的值computedCount : {{computedCount}}</p>
    <button @click="refCount++">refCount + 1</button>
        <!-- 点击报错 -->
    <button @click="computedCount++">计算属性的值computedCount + 1</button>
  </div>
</template>

<script>
import { computed, ref } from '@vue/composition-api'
export default {
  setup() {
    const refCount = ref(1)
    // 只读
    let computedCount = computed(() => refCount.value + 1)
    console.log(computedCount)
    return {
      refCount,
      computedCount
    }
  }
};
</script>

可读可写的计算属性:

  <div>
    <h3>04.computed.vue文件</h3>
    <p>refCount: {{refCount}}</p>
    <p>计算属性的值computedCount : {{computedCount}}</p>
    <button @click="refCount++">refCount + 1</button>
  </div>
</template>

<script>
import { computed, ref } from '@vue/composition-api'
export default {
  setup() {
    const refCount = ref(1)
    // 可读可写
    let computedCount = computed({
      // 取值函数
      get: () => refCount.value + 1,
      // 赋值函数
      set: val => {
        refCount.value = refCount.value -5
      }
    })
    console.log(computedCount.value)
    // 为计算属性赋值的操作,会触发 set 函数
    computedCount.value = 10
    console.log(computedCount.value)
    // 触发 set 函数后,count 的值会被更新
    console.log(refCount.value)
    return {
      refCount,
      computedCount
    }
  }
};
</script>

7.watch() 函数

watch() 函数用来监视某些数据项的变化,从而触发某些特定的操作,使用之前需要按需导入,例:



<template>
  <div>
    <h3>05.watch.vue文件</h3>
    <p>refCount: {{refCount}}</p>
  </div>
</template>

<script>
import { watch, ref } from '@vue/composition-api'
export default {
  setup() {
    const refCount = ref(100)
    // 定义 watch,只要 count 值变化,就会触发 watch 回调
    // 组件在第一次创建的时候执行一次 watch
    watch(() => console.log(refCount.value), { lazy: false})
    setInterval(() => {
      refCount.value += 2
    }, 5000)
    return {
      refCount
    }
  }
};
</script>