了解 Vue3 的新写法

一、Vue3里script的三种写法

html代码：

<template> 
    <div>{{ count }}</div> 
    <button @click="onclick">增加1</button> 
</template>

首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的script 现在支持三种写法:

1、最基本的 Vue2 写法

<script> 
export default{ 
    data() { 
        return { 
            count: 1 
        } 
    }, 
    methods: { 
        onclick() { 
            this.count += 1 
        } 
    } 
} 
</script>

2、setup() 属性

所有的对象和方法都需要 return 才能使用，比较繁琐。

<script> 
    import { ref } from "vue"; 
    export default { 
    setup() { 
        let count = ref(1) 
        const onclick = () => { 
            count.value += 1 
        } 
        return { 
            count, onclick 
        } 
    } 
} 
</script>

3、<script setup>

<script setup>本质上是第二种写法的语法糖，掌握了这种写法，其实第二种写法也基本上就会了。

<script setup> 
import { ref } from "vue"; 
// 用这种方式声明 
let count = ref(1) 
const onclick = () => { 
    // 使用的时候记得 .value 
    count.value += 1 
} 
</script>

无论是代码行数，还是代码的精简度，<script setup>的方式是最简单的形式。

二、如何使用<script setup>编写组件

html代码：

<template> 
    <div>{{ count }}</div> 
    <button @click="onclick">增加1</button> 
</template>

Vue3 的底层开发思想，跟 Vue2 是没有差别的。V3 和 V2 的区别就像是，你用不同的语言或者方言说同一句话。

所以需要关心的，就是 Vue2 里的内容，怎么用 Vue3 的方式写出来。

1、data——唯一需要注意的地方

以前在 data 中创建的属性，现在全都用 ref() 声明。在 template 中直接用，在 script 中记得加 .value 。

1）写法对比

// vue2 
<script> 
export default{ 
    data() { 
        return { 
        count: 1 
    } 
    }, 
} 
</script>

// vue3 
<script setup> 
import { ref } from "vue"; 
// 用这种方式声明 
let count = ref(1) 
</script>

2）注意事项——组合式 api 的心智负担

• ref 和 reactive

Vue3 里，还提供了一个叫做 reactive 的 api。

但是我的建议是，你不需要关心它。绝大多数场景下，ref 都够用了。

• 什么时候用 ref() 包裹，什么时候不用。

要不要用ref，就看你的这个变量的值改变了以后，页面要不要跟着变。

当然，你可以完全不需要关心这一点，跟过去写 data 一样就行。

只不过这样做，你在使用的时候，需要一直 .value。

• 不要解构使用

在使用时，不要像下面这样去写，会丢失响应性。 也就是会出现更新了值，但是页面没有更新的情况

// 错误示范 
<script setup> 
import { ref } from 'vue'; 
const count = ref(1); 
const onclick = () => { 
    // 不要这样写！！ 
    const { value } = count; 
    value += 1; 
}; 
</script>

注意： 学习 Vue3 就需要考虑像这样的内容，徒增了学习成本。实际上这些心智负担，在学习的过程中，是可以完全不需要考虑的。

2、methods

声明事件方法，我们只需要在 script 标签里，创建一个方法对象即可。剩下的在 Vue2 里是怎么写的，Vue3 是同样的写法。

写法对比：

// vue2 
<script> 
export default{ 
    ... 
    methods: { 
        onclick() { 
            this.count += 1 
        } 
    } 
} 
</script>

// vue3 
<script setup> 
... 
const onclick = () => { 
    // 使用的时候记得 .value 
    count.value += 1 
} 
</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 
}) 
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> 
<div>{{ value }}</div> 
<div>{{ reversedStr }}</div> 
</div> 
</template> 
<script> 
export default { 
    data() { 
        return { 
            str: "ABCDEFG" 
        } 
    }, 
    computed: { 
        reversedStr() { 
            return this.str.split('').reverse().join("") 
        } 
    } 
} 
</script>

// vue3 
<template> 
    <div> 
        <div>{{ value }}</div> 
        <div>{{ reversedStr }}</div> 
    </div> 
</template> 
<script setup> 
import { ref, computed } from "vue" 
let str = ref("ABCDEFG") 
// 注意这里 
let reversedStr = computed(() => { 
    // 使用 ref 需要 .value 
    return str.value.split('').reverse().join("") 
}) 
</script>

6、watch

Vue3 中，watch 有两种写法。一种是直接使用 watch，还有一种是使用 watchEffect。两种写法的区别是：

• watch：需要明确指定依赖的变量，才能做到监听效果。
• watchEffect：会根据使用的变量，自动的实现监听效果。

1）直接使用 watch

// vue2 
<template> 
    <div>{{ count }}</div> 
    <div>{{ watchCount }}</div> 
    <button @click="onClick"> 增加 1 </button> 
</template> 
<script> 
export default { 
    data() { 
        return { 
            count: 1, 
            watchCount: 0 
        } 
    }, 
    methods: { 
        onClick() { 
            this.count += 1 
        } 
    }, 
    watch: { 
        count(newValue, oldValue) { 
            this.watchCount = newValue - 1 
        }, 
    } 
} 
</script>

// vue3 
<template> 
    <div>{{ count }}</div> 
    <div>{{ watchCount }}</div> 
    <button @click="onClick"> 增加 1 </button> 
</template> 
<script setup> 
import { ref, watch } from "vue"; 
const count = ref(1) 
const onClick = () => { 
    count.value += 1 
} 
const watchCount = ref(0) 
// 注意：需要在这里，明确指定依赖的是 count 这个变量 
watch(count, (newValue) => { 
    watchCount.value = newValue - 1 
}) 
</script>

2）使用 watchEffect

注： vue2没有watchEffect

// vue3 
<template> 
<div>{{ count }}</div> 
<div>{{ watchCount }}</div> 
<button @click="onClick"> 增加 1 </button> 
</template> 
<script setup> 
import { ref, watch, watchEffect } from "vue"; 
const count = ref(1) 
const onClick = () => { 
    count.value += 1 
} 
const watchCount = ref(0) 
// 注意： 
watchEffect(() => { 
    // 会自动根据 count.value 的变化， 
    // 触发下面的操作 
    watchCount.value = count.value - 1 
}) 
</script>

7、生命周期

Vue3 里，除了将两个 destroy 相关的钩子，改成了 unmount，剩下的需要注意的，就是在<script setup>中，不能使用 beforeCreate 和 created 两个钩子。

• 如果熟悉相关的生命周期，只需要记得在 setup 里，用 on 开头，加上大写首字母就行。

// 选项式api写法 
<template> 
    <div></div> 
</template> 
<script> 
export default { 
    beforeCreate() { }, // 创建之前（数据初始化之前） 
    created() { }, // 创建完成（数据初始化完成） 
    beforeMount() { }, // 挂载之前（模板已经成功渲染，但是还没有将内容挂载到页面中） 
    mounted() { }, // 挂载完成（模板已经成功渲染，并将内容挂载到页面中） 
    beforeUpdate() { }, // 修改之前（数据已经改了，但是还没有重新挂载页面） 
    updated() { }, // 修改完成（数据已经改了，页面也已经重新挂载） 
    beforeDestroy() { }, // 销毁之前 
    destroyed() { }, // 销毁完成 // 其他钩子不常用，所以不列了。 
}
</script>

// 组合式 api 写法 
<template> 
<div></div> 
</template> 
<script setup> 
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated } from "vue"; 
// beforeCreate(建议使用setup代替)created(建议使用setup代替) 
onBeforeMount(() => { }) // 相当于vue2的beforeMount 
onMounted(() => { }) // 相当于vue2的mounted 
onBeforeUpdate(() => { }) // 相当于vue2的beforeUpdate 
onUpdated(() => { }) // 相当于vue2的updated 
onBeforeUnmount(() => { }) // 相当于vue2的
beforeDestroy onUnmounted(() => { }) // 相当于vue2的destroyed 
</script>

本文为微信公众号“三分钟学前端”《十分钟，带你了解 Vue3 的新写法》 学习笔记