1. Vue3.0项目创建（脚手架方式）
## 安装或者升级 npm install -g @vue/cli ## 保证 vue cli 版本在 4.5.0 以上 vue --version ## 创建项目 vue create my-project
接下来按步骤走即可
Please pick a preset - 选择 Manually select features
Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
Use class-style component syntax - 直接回车
Use Babel alongside TypeScript - 直接回车
Pick a linter / formatter config - 直接回车
Use history mode for router? - 直接回车
Pick a linter / formatter config - 直接回车
Pick additional lint features - 直接回车
Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
Save this as a preset for future projects? - 直接回车
也可以直接选择默认版本先玩一下
2. 拉开序幕 —— setup()
为什么用拉开序幕这个词？因为它可以代替许多东西，用起来特别爽
2.1 简介：
新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用
2.1.1 一般使用场景（返回对象）
<template> <div> <h1>玩一波setup</h1> <h2>姓名：{{name}}</h2> <h2>年龄：{{age}} </h2> <button @click="sayName">说话</button> </div> </template> <script> export default { name: 'HelloWorld', setup(){ // 此处的数据是无法实现响应式的 // 下一小节讲如何让它变成响应式 let name = "法外狂徒张三" let age = 3 function sayName(){ console.log(`我是${name}, 我${age}岁了`) } // 返回的数据可以直接显示在模板中 return{ name, age, sayName } } } </script>
- 可以在setup()中直接定义数据和方法
2.1.2 也可以用于返回一个模板（不常用，了解即可）
- 直接返回一个模板
return() => h('h1', 'vue3.0很牛逼')
3. 基本数据的响应式实现 —— ref()
- 先将 ref() 引入进来
- ref 用于处理基本数据类型
- 如果让它处理引用数据类型会很麻烦
<template> <div> <h1>玩一波setup</h1> <h2>姓名：{{name}}</h2> <h2>年龄：{{age}} </h2> <button @click="change">修改</button> </div> </template> <script> import {ref} from 'vue' export default { name: 'HelloWorld', setup(){ let name = ref("法外狂徒张三") let age = ref(3) function change(){ // 基本数据 第一层用的是get set 第二层 对象用的是 Proxy代理 name.value = "李四"; age.value = 38; } return{ name, age, change } } } </script>
- 点击按钮，数据就会进行修改
4. 引用数据的响应式实现 —— reactive()
- 先将 reactive() 引入进来
- reactive()不能用于基本数据类型，会报错
<template> <div> <h1>玩一波setup</h1> <h3>女朋友名字：{{gf.gfName}}</h3> <h3>女朋友年龄：{{gf.gfAge}}</h3> <h3>新属性C：{{gf.a.b.c}}</h3> <h3>爱好： {{gf.hobby}}</h3> <button @click="change">修改</button> </div> </template> <script> import {reactive} from 'vue' export default { name: 'HelloWorld', setup(){ let gf = reactive({ gfName: '刘亦菲', gfAge: 18, a:{ b:{ c: '我是属性C' } }, hobby: ['唱','跳','rap','篮球'] }) function change(){ gf.gfName="杨幂" gf.gfAge = 38 // 深层次的对象可以处理 gf.a.b.c = "新的C属性" // 数组可以直接改 gf.hobby[0] = "撩妹" } return{ gf, change } } } </script>
5. FAQ（需要注意的地方）
5.1 setup()执行的时机
在beforeCreate之前执行(一次), 此时组件对象还没有创建
this是undefined, 不能通过this来访问data/computed/methods / props
其实所有的composition API相关回调函数中也都不可以
5.1 setup()的返回值
一般都返回一个对象，为模板提供数据。也就是模板中可以直接使用此对象中的所有属性/方法
返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性
返回对象中的方法会与methods中的方法合并成功组件对象的方法
如果有重名, setup优先
注意:
一般不要混合使用: methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods
setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性数据
5.3 reactive 与 ref 细节
这两者是Vue3的 composition API中2个最重要的响应式API
ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式)
如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象
ref内部: 通过给value属性添加getter/setter来实现对数据的劫持
reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据
ref的数据操作: 在js中要.value, 在模板中不需要(内部解析模板时会自动添加.value)
