vue3.0支持vue2.0的所有语法。 所以本文只简单描述一下vue3.0当中的一些常用方法及和2.0之间做一下简单的对比。
与Vue2.0的区别
- ?? ?性能提升
- ? ? template模板中支持使用多个根节点， 即不需要在多个标签的外面套一个div
- ?? ?main.js中注册的写法
- ?? ?Vue3中建议使用 ?:deep() 替代 /deep/?
- ?? ?加强对typescript的支持，原来是可以配置使用，现在是可以直接使用
- ? ? vue3.0是 composition API 组合式api?
import { setup, reactive ,ref,computed,toRefs,watch... } from 'vue' setup为入口函数
?在2.0中，data(){ return {...}} 用来放变量， methods:{...} 用来放方法，computed:{...}用来做计算等等，如果一个页面中的逻辑很多，js代码以后很难维护。
?而在3.0中， 它们都可以放到一个setup(){... return{...}} 函数中
(?? 3.2以后可以写成<script setup>...</script> 该写法会自动将变量和函数return出去。)，
也就是我们可以像原来正常写js一样，把一些相关的变量和方法写在一块，并且可以单独提取出去，再引用。 更方便后期代码的修改和运维。
setup?选项在组件创建之前执行。此外，我们将?setup?返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。下面举例常用的函数（以下均为包裹在<script setup></script>中的写法。）：
1. ref -?监听简单类型的变化，不能监听复杂类型的变化（对象/数组）要改变数值的时候要用 变量.value='xxx' 更改。?底层是reactive。
const count = ref(0)2. reactive -?reactive可以监听复杂类型的变化，如果要改变对象或数组值的时候，要重新赋值，不能直接更改，?底层是proxy。
const state =reactive({
num1:0,
num2:0
});?3. computed -?计算属性
const state =reactive({
num1:0,
num2:0,
result:computed(()=>state.num1*1+state.num2*1)
});?4. defineProps -?等同于vue2.0中的props，组件接收参数
const props = defineProps({
title:{
type:String,
default:'hello vue 3.0'
}
});5. defineEmit -?等同于 vue2.0的$emit?
const emit = defineEmits(['sendMsgC2']);
const sendMsg =()=>{
emit("sendMsgC2", state.result);
}?6. watch - 监听函数
watch(count,(newvalue,oldvalue)=>{
console.log(newvalue);
console.log(oldvalue);
});?7. toRefs - 创建响应式引用。例如一些从后台拿到的数据解构后并非是ref那种响应式数据， 无法在页面中响应式改变其值， 可以先toRefs一下再解构
...toRefs(data)以下例子就是一个2.0和3.0简单写法的对比例子（计算两个数的和，点击按钮将数据传送给父组件）：
Vue 2.0?
<template>
<h2>vue 2.0</h2>
<input type="text" v-model="num1" />+ <input type="text" v-model="num2" />=
<span>{{ result }}</span> <span>{{ title }}</span>
<button @click="sendMsg">send msg</button>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "hello vue 2.0",
},
},
data() {
return {
num1: 0,
num2: 0,
};
},
computed: {
result() {
return this.num1 * 1 + this.num2 * 1;
},
},
methods: {
sendMsg() {
this.$emit("sendMsgC1", this.result);
},
},
};
</script>
<style>
</style>?Vue 3.0
<template>
<h2>vue 3.0</h2>
<input type="text" v-model="state.num1" />+
<input type="text" v-model="state.num2" />= <span>{{ state.result }}</span>
<span>{{ title }}</span>
<button @click="sendMsg">send msg</button>
<hr />
<h2>其他：</h2>
<input type="text" v-model="count" />
</template>
<script setup>
import { computed, reactive, ref, defineProps, watch } from "vue";
let count = ref(0);
const props = defineProps({
title: {
type: String,
default: "hello vue 3.0",
},
});
const emit = defineEmits(["sendMsgC2"]);
const sendMsg = () => {
emit("sendMsgC2", state.result);
};
const state = reactive({
num1: 0,
num2: 0,
result: computed(() => state.num1 * 1 + state.num2 * 1),
});
watch(count, (newvalue, oldvalue) => {
console.log(newvalue);
console.log(oldvalue);
});
watch(state, (newvalue, oldvalue) => {
console.log(newvalue);
console.log(oldvalue);
});
</script>
<style>
</style>父组件中使用3.0语法引用组件和接收传递过来的数据：
<template>
<C1 :title="'hh,vue 2.0'" @sendMsgC1='getMsgFromc1'></C1>
<C2 :title="'hh,vue 3.0'" @sendMsgC2='getMsgFromc2'></C2>
</template>
<script setup>
import { onMounted } from 'vue';
import C1 from './components/C1.vue'
import C2 from './components/C2.vue'
const getMsgFromc1=(val)=>{
alert(`传递过来的结果值为：${val}`)
};
const getMsgFromc2=(val)=>{
alert(`传递过来的结果值为：${val}`)
};
onMounted(()=>{
console.log('onmounted...')
})
</script>
<style>
</style>