vue为什么那么难?
最近因为项目需要，不得不学习一下 Vue3。于是花了 4 个小时，把 Vue3 过了一遍。现在我来带你快速了解 Vue3 的写法。
本文的目的，是为了让已经有 Vue2 开发经验的 人 ，快速掌握 Vue3 的写法。
因此， 本篇假定你已经掌握 Vue 的核心内容 ，只为你介绍编写 Vue3 代码，需要了解的内容。
一、Vue3 里 script 的三种写法
首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法，
1、最基本的 Vue2 写法
html复制代码<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() 属性
xml复制代码<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、<script setup>
xml复制代码<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>
正如你看到的那样，无论是代码行数，还是代码的精简度，<script setup> 的方式是最简单的形式。
如果你对 Vue 很熟悉，那么，我推荐你使用 <script setup> 的方式。
这种写法，让 Vue3 成了我最喜欢的前端框架。
如果你还是前端新人，那么，我推荐你先学习第一种写法。
因为第一种写法的学习负担更小，先学第一种方式，掌握最基本的 Vue 用法，然后再根据我这篇文章，快速掌握 Vue3 里最需要关心的内容。
第一种写法，跟过去 Vue2 的写法是一样的，所以我们不过多介绍。
第二种写法，所有的对象和方法都需要 return 才能使用，太啰嗦。除了旧项目，可以用这种方式体验 Vue3 的新特性以外，我个人不建议了解这种方式。反正我自己暂时不打算精进这部分。
所以，接下来，我们主要介绍的，也就是 <script setup> ，这种写法里需要了解的内容。
注意： <script setup> 本质上是第二种写法的语法糖，掌握了这种写法，其实第二种写法也基本上就会了。（又多了一个不学第二种写法的理由）。
二、如何使用 <script setup> 编写组件
学习 Vue3 并不代表你需要新学习一个技术，Vue3 的底层开发思想，跟 Vue2 是没有差别的。
V3 和 V2 的区别就像是，你用不同的语言或者方言说同一句话。
所以我们需要关心的，就是 Vue2 里的内容，怎么用 Vue3 的方式写出来。
1、data——唯一需要注意的地方
整个 data 这一部分的内容，你只需要记住下面这一点。
以前在 data 中创建的属性，现在全都用 ref() 声明。
在 template 中直接用，在 script 中记得加 .value 。
在开头，我就已经写了一个简单的例子，我们直接拿过来做对比。
1）写法对比
xml复制代码 // Vue2 的写法
<template>
<div>{{ count }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script>
export default {
data() {
return {
count: 1,
};
},
methods: {
onClick() {
this.count += 1;
},
},
}
</script>
xml复制代码 // Vue3 的写法
<template>
<div>{{ count }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script setup>
import { ref } from 'vue';
// 用这种方式声明
const count = ref(1);
const onClick = () => {
// 使用的时候记得 .value
count.value += 1;
};
</script>
2）注意事项——组合式 api 的心智负担
a、ref 和 reactive
Vue3 里，还提供了一个叫做 reactive 的 api。
但是我的建议是，你不需要关心它。绝大多数场景下，ref 都够用了。
b、什么时候用 ref() 包裹，什么时候不用。
要不要用ref，就看你的这个变量的值改变了以后，页面要不要跟着变。
当然，你可以完全不需要关心这一点，跟过去写 data 一样就行。
只不过这样做，你在使用的时候，需要一直 .value。
c、不要解构使用
在使用时，不要像下面这样去写，会丢失响应性。
也就是会出现更新了值，但是页面没有更新的情况
xml复制代码// 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 是同样的写法。
xml复制代码// Vue2 的写法
<template>
<div @click="onClick">
这是一个div
</div>
</template>
<script>
export default {
methods: {
onClick() {
console.log('clicked')
},
},
}
</script>
xml复制代码// Vue3 的写法
<template>
<div @click="onClick">
这是一个div
</div>
</template>
<script setup>
// 注意这部分
const onClick = () => {
console.log('clicked')
}
</script>
3、props
声明 props 我们可以用 defineProps()，具体写法，我们看代码。
1）写法对比
xml复制代码// Vue2 的写法
<template>
<div>{{ foo }}</div>
</template>
<script>
export default {
props: {
foo: String,
},
created() {
console.log(this.foo);
},
}
</script>
xml复制代码// Vue3 的写法
<template>
<div>{{ foo }}</div>
</template>
<script setup>
// 注意这里
const props = defineProps({
foo: String
})
// 在 script 标签里使用
console.log(props.foo)
</script>
2）注意事项——组合式 api 的心智负担
使用 props 时，同样注意不要使用解构的方式。
xml复制代码<script setup>
const props = defineProps({
foo: String
})
// 不要这样写
const { foo } = props;
console.log(foo)
</script>
4、emits 事件
与 props 相同，声明 emits 我们可以用 defineEmits()，具体写法，我们看代码。
xml复制代码// Vue2 的写法
<template>
<div @click="onClick">
这是一个div
</div>
</template>
<script>
export default {
emits: ['click'], // 注意这里
methods: {
onClick() {
this.$emit('click'); // 注意这里
},
},
}
</script>
xml复制代码// Vue3 的写法
<template>
<div @click="onClick">
这是一个div
</div>
</template>
<script setup>
// 注意这里
const emit = defineEmits(['click']);
const onClick = () => {
emit('click') // 注意这里
}
</script>
5、computed
直接上写法对比。
xml复制代码// 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>
xml复制代码// 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 需要 .value
return value.value
.split('').reverse().join('');
})
</script>
6、watch
这一部分，我们需要注意一下了，Vue3 中，watch 有两种写法。一种是直接使用 watch，还有一种是使用 watchEffect。
两种写法的区别是：
watch需要你明确指定依赖的变量，才能做到监听效果。- 而
watchEffect会根据你使用的变量，自动的实现监听效果。
1）直接使用 watch
xml复制代码// 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>
xml复制代码// 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
xml复制代码// 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>
xml复制代码// 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，剩下的需要注意的，就是在 <script setup> 中，不能使用 beforeCreate 和 created 两个钩子。
如果你熟悉相关的生命周期，只需要记得在 setup 里，用 on 开头，加上大写首字母就行。
xml复制代码// 选项式 api 写法
<template>
<div></div>
</template>
<script>
export default {
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
// Vue2 里叫 beforeDestroy
beforeUnmount() {},
// Vue2 里叫 destroyed
unmounted() {},
// 其他钩子不常用，所以不列了。
}
</script>
xml复制代码// 组合式 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 的官方文档
文章来源：十分钟，带你了解 Vue3 的新写法
往期干货
【前端行业发展】：
- Web 前端分为哪几个大方向，工资待遇如何，辛苦吗？
- 找前端工作会不会很难？
- 现在web前端的工资怎样？
- 前端开发就业情况如何？
【前端工作内容】：
- 前端工程师主要工作内容是什么？
- 前端开发是做什么的？工作职责有哪些？
【前端学习路线】：
- 0基础入门学前端，2023年前端学习路线总结，前端开发需要学什么？
【前端自学网站】：
- 【建议收藏】91个前端开发必备学习国内外免费网站和个人博客
- 13 个有趣且实用的 CSS 框架 / 组件
- 有哪些好的前端社区？
【前端书籍推荐（32本）】：
- 【建议收藏】2023前端书籍，前端开发入门与前端学习路线
【前端面试题】：
- 【建议收藏】4500字前端面试题及答案汇总，前端八股文
- 关于前端Vue框架的面试题，面试官可能会问到哪些？
- 【一定要收藏】32000字的前端面试题总结！！！
- （建议收藏）Vue面试热点问题
【前端简历模板】：
- web前端简历个人技能该怎么写?
- 前端简历中项目描述怎么写能够更加的优雅？
- 一个优秀的前端工程师简历应该是怎样的？
- 前端简历怎么写？前端尽力模板，4个动作帮你搞定心仪Offer
- 面试前端工程师简历应该怎么写才容易通过？
- 自学 web 前端人怎么找工作？
- 自学前端简历怎么写啊？
【HTML教程】：
- HTML5入门教程（含新特性），从入门到精通
- HTML图文教程（表单域/文本框与密码框/单选按钮与复选框）
- HTML图文教程（选按钮与复选框/input标签/提交按钮与重置按钮）
- HTML图文教程（通按钮/文件域/label/下拉表单）
- HTML零基础入门教程， 零基础学习HTML网页制作（HTML基本结构）
- HTML零基础入门教程， 零基础学习HTML网页制作（HTML 标签）
【JavaScript教程】：
- JavaScript 是什么？
- JavaScript基础入门教程（引入方式/注释/变量/常量/数据类型/类型转换）
- JavaScript基础入门教程（引入方式/注释/变量/数据类型/类型转换）
- JavaScript基础入门教程（for循环/数组）
- JavaScript基础入门教程（函数/返回值/作用域）
- JavaScript基础入门教程（对象/内置对象）
- JavaScript进阶教程（作用域/函数/解构赋值）
- JavaScript进阶教程（构造函数/内置函数/继承/封装）
- JavaScript进阶教程（深浅拷贝/异常/this/防抖节流）
- JavaScript函数（函数创建和使用、参数传递）
- JavaScript函数（函数返回值）
- JavaScript数函（作用域和局部变量）
- JavaScript函数（模态框插件的封装）
【VUE教程】：
- Vue基础入门教程(vue-cli+vue指令)
- Vue基础入门教程(vue指令大全)
- Vue基础入门教程(vue组件化开发)
- 最全的Vuex学习教程(Vuex基础、模块化、案例)
【Koa2教程】：
- Koa2框架是什么？Koa框架教程快速入门Koa中间件
- Koa2框架路由应用，Koa2前景、Koa2中间件
- Koa2异常处理
如果对你有帮助的话，点个赞收个藏，给作者一个鼓励。也方便你下次能够快速查找。
最后，希望喜欢学习的你们，坚持下去，做一个有知识的前端人，加油~
今天先分享到这里，写了好久的回答，看完了点个赞呀！！！
