**
本文的目的，是为了让已经有 Vue2 开发经验的** **人** **，快速掌握 Vue3 的写法。**
**因此，** **本篇假定你已经掌握 Vue 的核心内容** **，只为你介绍编写 Vue3 代码，需要了解的内容。**
## 一、Vue3 里 `script` 的三种写法
首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的 `script` 现在支持三种写法，
### **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、`<script setup>`
~~~
<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）写法对比
~~~
// 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 = () => {
// 使用的时候记得 .value
count.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 需要 .value
return 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`，剩下的需要注意的，就是在 `<script setup>` 中，不能使用 `beforeCreate` 和 `created` 两个钩子。
如果你熟悉相关的生命周期，只需要记得在 `setup` 里，用 `on` 开头，加上大写首字母就行。
~~~
// 选项式 api 写法
<template>
<div></div>
</template>
<script>
export default {
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
// Vue2 里叫 beforeDestroy
beforeUnmount() {},
// Vue2 里叫 destroyed
unmounted() {},
// 其他钩子不常用，所以不列了。
}
</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 的官方文档。
- 后端
- composer
- composer配置国内镜像
- composer安装及设置2
- PHP
- 贝塔SG11加密
- 申请KEY
- 开始加密
- php 中连接tcp服务的三种方式
- php websocket 教程
- editor内容转换数组
- 使用正则判断中文维吾尔文
- PHP常用函数总结
- 常用助手函数
- 通过Imagick把pdf转换图片
- 维吾尔语基本区转换扩展区
- php GD库生成一个由文字和图片生成新的图片
- aes加密
- php数组函数 -- array_column,array_multisort 实现二维数组排序
- PHP操作Excel
- php更新内容
- 辅助查询（*）
- 【时间】操作
- 时间函数例子
- Date/Time 函数（不包含别名函数）
- php网络相关
- HTTP请求的返回值含义说明
- 使用php语言开发一个类似数据库操作的文件表类
- pinyin
- 维吾尔语基本区转换扩展区(2)
- php获取当前环境的信息
- laravel
- laravel 队列的使用
- laravel 自定义助手函数
- laravel seeder的使用
- laravel项目从git下载命令
- laravel 多个数据库配置
- laravel 填充假数据
- laravel 动态路由
- laravel 自定义 validate 响应
- laravel 创建追加字段的模拟访问器
- laravel 线上环境的数据库更改或添加字段
- laravel 模型查询按照whereIn排序
- laravel 使用 workerman 通过TCP 文件传输功能
- laravel api Header添加Accept头
- Laraval IDE 自动补全插件 laravel-ide-helper
- laravel 网站后台
- laravel 设置路由
- laravel-第三方composer包
- laravel 开发技巧
- laravel 昨天，今天时间
- 使用宝塔计划任务启动laravel调度器
- laravel结合workerman第二节
- Laravel - 上传多个文件
- 查询聊天好友列表
- 事件系统 event, listener
- laravel 安装 laravel-modules
- 自定义求看守器-toekn
- laravel限流
- 使用 Laravel api Resource 类时自定义分页信息
- Laravel php artisan命令大全
- 验证器
- workerman 创建wss服务
- 架构师必须知道的26项PHP安全实践
- python
- Python读取文件代码块已经备好，用的时候光拿（建议收藏）
- Python常用库大全
- api 签名验证
- git
- git命令
- 十分钟学会git基础
- Git代码同时上传到GitHub和Gitee(码云)
- Git - 多人协同开发利器，团队协作流程规范与注意事项
- 删除远程仓库的文件
- github查询方法
- 错误
- 解除项目git版本控制
- linux
- sentos安装supervisor
- PHP怎么守护进程运行php脚本
- 600条最强Linux命令总结
- centos开启防火墙、开放指定端口
- 前端
- vue
- vue2发布之前的config简单配置
- vue2安装scss命令
- vue2父子组件之间双向数据绑定
- 国际化双语--安装VueI18n
- vue3-setup 组件传参（defineProps、defineEmits、defineExpose
- Vue3 新写法速览：十分钟内轻松get
- 关于vue的外连接
- watch讲解
- computed
- webpack 打包后生成很多小文件怎么优化？
- vue2 vue.config.js常见配置和打包部署测试
- 小程序
- 小程序长期订阅消息
- 小程序自定义TabBar后如何实现keep-alive
- 收藏的html和css和js
- CSS 省略号（单行省略号、多行省略号）
- UyghurInput_a.js
- font.css
- 漂亮按钮样式
- clock.html
- css
- scroll css样式
- CSS流动布局-页面自适应
- css grid布局
- 禁止wap页面调整字体大小
- CSS @media 和 min-width/max-width
- 网站变灰是怎么实现的
- 瀑布流实现方式
- javascript
- SortableJS拖动排序
- wondow scroll滚动到上边
- 原生js插入HTML元素
- Konva.js —— 像操作DOM一样操作canvas
- 通过canvas合并俩个图片
- js scroll更多加载
- js 实现复制功能
- js判断安卓和苹果或者微信
- 浏览器打开控制台禁止
- 原生js一些dom操作
- js http客户端集合
- fetch
- axios
- canvas 点钟
- layer dialog
- jquery 和 laravel ajax全局配置
- layui 获取select的自定义参数
- konva.js中文开发文档
- js 大文件分片上传
- js监听网络状态实现断网重连后自动刷新页面
- js生成video缩略图
- JS获取当前系统电量情况
- uniapp
- uni-app swiper数量过多时卡顿优化方案
- uniapp 帖子集合
- 微信wap
- wap分享朋友和朋友圈
- wap 手机页面微信支付
- JsSdk微信公众号支付
- 通用各种小知识
- 正则表达式
- JS正则匹配过滤字符串中的html标签及html标签内的内容
- 判断维吾尔文输入
- 正则表达式符号
- 正则表达式练习
- 百度网盘不限速下载助手
- 解决VSCode下载慢或下载失败的问题
- 性能测试 使用Apache的ab测试工具
- nginx从入门到精通
- nginx
- Nginx 是怎么禁止访问php的 ？
- 宝塔面板
- supervisor
- 卸载宝塔
- redis
- redis实用笔记
- redis入门到精通
- phpredis
- redis数据库基础
- PHP对Redis的基本操作
- ffmpeg
- 合并多个音视
- 获取音视时长
- FFmpeg视频处理入门教程(新手必看)
- 外连接
- 安装
- PHP基于ffmpeg实现转换视频，截图及生成缩略图的方法
- Linux安装ffmpeg
- docker
- 服务实现
- docker基本命令
- rewrite笔记
- 别人笔记链接
- 计算机常用知识
- 二进制1-10
- 斐波那契数列
- mysql
- 高性能高可用的MySQL,得从各种规范开始
- 读写分离配置
- 重要外连接，前端/ 后端/数据库等等
- 关于程序必须收藏的文章链接集合
- markdown
- 一篇文章讲清楚markdown