这是我参与新手入门的第3篇文章
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>