vue3.0的入门使用
Posted 小蘑菇
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3.0的入门使用相关的知识,希望对你有一定的参考价值。
1.createApp // 顾名思义,创建一个APP实例
// 先导入createApp模块
import { createApp } from \'vue\';
import App from \'./App.vue\';
// 使用createApp方法将我们的入口文件放进去,最后挂载
createApp(App).mount(\'#app\');
2.onMounted // 跟之前的写法不一样了不过,多了一个on
// 先导入onMounted模块
import { onMounted, defineComponent } from \'vue\';
export default defineComponent({
setup () {
// 使用的时候需要放在setup里边
onMounted(() => {
console.log(\'组件挂在结束开始打印。。。\')
})
}
})
3.computed 计算机属性
import { computed, ref } from \'vue\';
// 基本操作
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // 错误!
import { computed, ref } from \'vue\';
// 可以修改值
const count = ref(1)
const plusOne = computed({
get: () => count.value + 1,
set: (val) => {
count.value = val - 1
},
})
plusOne.value = 1
console.log(count.value) // 0
4.watch 监听器
import { reactive, watch } from \'vue\';
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
}
)
// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
/* ... */
})
5.watchEffect 监听器的升级版本,立即执行传入的一个函数,并响应式追踪其依赖,并在其依赖变更时重新运行该函数。
const count = ref(0)
watchEffect(() => console.log(count.value))
// -> 打印出 0
setTimeout(() => {
count.value++
// -> 打印出 1
}, 100)
停止侦听,当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时, 侦听器会被链接到该组件的生命周期,并在组件卸载时自动停止。
const stop = watchEffect(() => {
/* ... */
})
// 之后
stop()
6.reactive 接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable(),注意在源码中明确显示需要传递一个对象,否则会抛出异常,如果想要对一个单独的变量使用响应式,可以使用ref下边介绍
const obj = reactive({ count: 0 }) // 返回的就是响应式对象
// 使用
obj.count ++
console.log(obj.count) // 输出的是1
如果想要在组件内使用这个变量需要在setup中返回
第一种返回形式
<template>
<!-- 这种形式在组件内使用的时候需要obj.count -->
<p>{{ obj.count }}</p>
</template>
import { reactive } from \'vue\';
export default defineComponent({
setup () {
const obj = reactive({ count: 0 })
return { obj } // 这种形式在组件内使用的时候需要obj.count
}
})
第二种返回形式
<template>
<!-- 这种形式在组件内使用的时候跟之前一样 -->
<p>{{ count }}</p>
</template>
import { reactive, toRefs } from \'vue\';
export default defineComponent({
setup () {
const obj = reactive({ count: 0 })
return { ...toRefs(obj) }
}
})
7.toRefs 把一个响应式对象转换成普通对象,该普通对象的每个 property 都是一个 ref ,和响应式对象 property 一一对应。
import { reactive, toRefs } from \'vue\';
export default defineComponent({
setup () {
const obj = reactive({ count: 0 })
return { ...toRefs(obj) }
}
})
8.ref 接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
9.toRef 可以用来为一个 reactive 对象的属性创建一个 ref。这个 ref 可以被传递并且能够保持响应性。
const state = reactive({
foo: 1,
bar: 2,
})
const fooRef = toRef(state, \'foo\')
fooRef.value++
console.log(state.foo) // 2
state.foo++
console.log(fooRef.value) // 3
10.nextTick
import { nextTick } from \'vue\';
export default defineComponent({
setup () {
nextTick(() => {
console.log(\'--- DOM更新了 ---\')
})
}
})
11.兄弟组件传值eventbus
vue3版本废弃o n , on,on,emit等eventbus
官网代替方案: mitt or tiny-emitter
npm install --save mitt
在bus.js中写上
import mitt from \'mitt\'
const bus = {}
const emitter = mitt()
bus.$on = emitter.on
bus.$off = emitter.off
bus.$emit = emitter.emit
export default bus
在需要用的页面引入 bus.js即可
import Bus from ‘@/bus’
Bus.$emit(\'test\',\'内容\')
import Bus from ‘@/bus’
Bus.$on(\'test\',(data)=>{
console.log(data)
})
以上是关于vue3.0的入门使用的主要内容,如果未能解决你的问题,请参考以下文章