本文的目的,是为了让已经有 Vue2 开发经验的 人 ,快速掌握 Vue3 的写法。
因此, 本篇假定你已经掌握 Vue 的核心内容 ,只为你介绍编写 Vue3 代码,需要了解的内容。
一、Vue3 里 script 的三种写法
首先,Vue3 新增了一个叫做组合式 api 的东西,英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法,
文章目录
- 1、data——唯一需要注意的地方
- 2、methods
- 3、props
- 4、emits 事件
- 5、computed
- 6、watch
- 7、生命周期
1、最基本的 Vue2 写法
<template><div>{{ count }}</div><button @click="onClick">增加 1</button>
</template><script>
export default {data() {return {count: 1,};},methods: {onClick() {this.count += 1;},},
}
</script>
2、setup() 属性
<template><div>{{ count }}</div><button @click="onClick">增加 1</button>
</template><script>
import { ref } from 'vue';
export default {// 注意这部分setup() {let count = ref(1);const onClick = () => {count.value += 1;};return {count,onClick,};},}
</script>
3、
<template><div>{{ count }}</div><button @click="onClick">增加 1</button>
</template><script setup>
import { ref } from 'vue';const count = ref(1);
const onClick = () => {count.value += 1;
};
</script>
正如你看到的那样,无论是代码行数,还是代码的精简度,
1、data——唯一需要注意的地方
整个 data 这一部分的内容,你只需要记住下面这一点。
以前在 data 中创建的属性,现在全都用 ref() 声明。
在 template 中直接用,在 script 中记得加 .value 。
在开头,我就已经写了一个简单的例子,我们直接拿过来做对比。
1)写法对比
// Vue2 的写法
<template><div>{{ count }}</div><button @click="onClick">增加 1</button>
</template><script>
export default {data() {return {count: 1,};},methods: {onClick() {this.count += 1;},},
}
</script>
// Vue3 的写法
<template><div>{{ count }}</div><button @click="onClick">增加 1</button>
</template><script setup>
import { ref } from 'vue';// 用这种方式声明
const count = ref(1);const onClick = () => {// 使用的时候记得 .valuecount.value += 1;
};
</script>
2)注意事项——组合式 api 的心智负担
a、ref 和 reactive
Vue3 里,还提供了一个叫做 reactive 的 api。
但是我的建议是,你不需要关心它。绝大多数场景下,ref 都够用了。
b、什么时候用 ref() 包裹,什么时候不用。
要不要用ref,就看你的这个变量的值改变了以后,页面要不要跟着变。
当然,你可以完全不需要关心这一点,跟过去写 data 一样就行。
只不过这样做,你在使用的时候,需要一直 .value。
c、不要解构使用
在使用时,不要像下面这样去写,会丢失响应性。
也就是会出现更新了值,但是页面没有更新的情况
// Vue3 的写法
<template><div>{{ count }}</div><button @click="onClick">增加 1</button>
</template><script setup>
import { ref } from 'vue';const count = ref(1);
const onClick = () => {// 不要这样写!!const { value } = count;value += 1;
};
</script>
注意: 学习 Vue3 就需要考虑像这样的内容,徒增了学习成本。实际上这些心智负担,在学习的过程中,是可以完全不需要考虑的。
这也是为什么我推荐新人先学习 Vue2 的写法。
2、methods
声明事件方法,我们只需要在 script 标签里,创建一个方法对象即可。
剩下的在 Vue2 里是怎么写的,Vue3 是同样的写法。
// Vue2 的写法
<template><div @click="onClick">这是一个div</div>
</template><script>
export default {methods: {onClick() {console.log('clicked')},},
}
</script>
复制代码
// Vue3 的写法
<template><div @click="onClick">这是一个div</div>
</template><script setup>// 注意这部分
const onClick = () => {console.log('clicked')
}</script>
3、props
声明 props 我们可以用 defineProps(),具体写法,我们看代码。
1)写法对比
// Vue2 的写法
<template><div>{{ foo }}</div>
</template><script>
export default {props: {foo: String,},created() {console.log(this.foo);},
}
</script>
// Vue3 的写法
<template><div>{{ foo }}</div>
</template><script setup>// 注意这里
const props = defineProps({foo: String
})// 在 script 标签里使用
console.log(props.foo)
</script>
2)注意事项——组合式 api 的心智负担
使用 props 时,同样注意不要使用解构的方式。
<script setup>
const props = defineProps({foo: String
})// 不要这样写
const { foo } = props;
console.log(foo)
</script>
4、emits 事件
与 props 相同,声明 emits 我们可以用 defineEmits(),具体写法,我们看代码。
// Vue2 的写法
<template><div @click="onClick">这是一个div</div>
</template><script>
export default {emits: ['click'], // 注意这里methods: {onClick() {this.$emit('click'); // 注意这里},},}
</script>
// Vue3 的写法
<template><div @click="onClick">这是一个div</div>
</template><script setup>// 注意这里
const emit = defineEmits(['click']);const onClick = () => {emit('click') // 注意这里
}</script>
5、computed
直接上写法对比。
// Vue2 的写法
<template><div><span>{{ value }}</span><span>{{ reversedValue }}</span></div>
</template><script>
export default {data() {return {value: 'this is a value',};},computed: {reversedValue() {return value.split('').reverse().join('');},},
}
</script>
// Vue3 的写法
<template><div><span>{{ value }}</span><span>{{ reversedValue }}</span></div>
</template><script setup>
import {ref, computed} from 'vue'
const value = ref('this is a value')// 注意这里
const reversedValue = computed(() => {// 使用 ref 需要 .valuereturn value.value.split('').reverse().join('');
})</script>
6、watch
这一部分,我们需要注意一下了,Vue3 中,watch 有两种写法。一种是直接使用 watch,还有一种是使用 watchEffect。
两种写法的区别是:
watch 需要你明确指定依赖的变量,才能做到监听效果。
而 watchEffect 会根据你使用的变量,自动的实现监听效果。
1)直接使用 watch
// Vue2 的写法
<template><div>{{ count }}</div><div>{{ anotherCount }}</div><button @click="onClick">增加 1</button>
</template><script>
export default {data() {return { count: 1,anotherCount: 0,};},methods: {onClick() {this.count += 1;},},watch: {count(newValue) {this.anotherCount = newValue - 1;},},
}
</script>
// Vue3 的写法
<template><div>{{ count }}</div><div>{{ anotherCount }}</div><button @click="onClick">增加 1</button>
</template><script setup>
import { ref, watch } from 'vue';const count = ref(1);
const onClick = () => {count.value += 1;
};const anotherCount = ref(0);// 注意这里
// 需要在这里,
// 明确指定依赖的是 count 这个变量
watch(count, (newValue) => {anotherCount.value = newValue - 1;
})</script>
2)使用 watchEffect
// Vue2 的写法
<template><div>{{ count }}</div><div>{{ anotherCount }}</div><button @click="onClick">增加 1</button>
</template><script>
export default {data() {return { count: 1,anotherCount: 0,};},methods: {onClick() {this.count += 1;},},watch: {count(newValue) {this.anotherCount = newValue - 1;},},
}
</script>
// Vue3 的写法
<template><div>{{ count }}</div><div>{{ anotherCount }}</div><button @click="onClick">增加 1</button>
</template><script setup>
import { ref, watchEffect } from 'vue';const count = ref(1);
const onClick = () => {count.value += 1;
};const anotherCount = ref(0);// 注意这里
watchEffect(() => {// 会自动根据 count.value 的变化,// 触发下面的操作anotherCount.value = count.value - 1;
})</script>
7、生命周期
Vue3 里,除了将两个 destroy 相关的钩子,改成了 unmount,剩下的需要注意的,就是在
<template><div></div>
</template><script>
export default {beforeCreate() {},created() {},beforeMount() {},mounted() {},beforeUpdate() {},updated() {},// Vue2 里叫 beforeDestroybeforeUnmount() {},// Vue2 里叫 destroyedunmounted() {},// 其他钩子不常用,所以不列了。
}
</script>
// 组合式 api 写法
<template><div></div>
</template><script setup>
import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,
} from 'vue'onBeforeMount(() => {})
onMounted(() => {})onBeforeUpdate(() => {})
onUpdated(() => {})onBeforeUnmount(() => {})
onUnmounted(() => {})
</script>
三、结语
好了,对于快速上手 Vue3 来说,以上内容基本已经足够了。
这篇文章本身不能做到帮你理解所有 Vue3 的内容,但是能帮你快速掌握 Vue3 的写法。
如果想做到对 Vue3 的整个内容心里有数,还需要你自己多看看 Vue3 的官方文档。