//vue3新特性巡礼
//vue2大部分特性都完全的保留到vue3中，你可以像使用vue2一样原封不动的使用vue3,
//这是它遵循的渐进式准则
//v3.vuejs.org
1.性能提升
打包大小减少41%
初次渲染快55%，更新快133%
内存使用减少 54%
//这得益于重写虚拟DOM的实现和 的优化
2.composition API （新推出的API）
在vue2中遇到一个问题，复杂组件的代码变得越来越难以维护，
缺少一种比较干净的，在多个组件之间题提取和复用逻辑的机制，
现在的重用机制都有一些弊端，
所以vue3中隆重推出了composition API
composition---组合
//ref和reactive
//computed和watch
//新的生命周期函数
//自定义函数--Hooks函数（重要）
3.其他新特性
Teleport--瞬间组件的位置
Suspense--异步加载组件的新福音
全局API的修改和优化
更多的实验性特性
4.更好的TypeScript的支持
使用vue-cli配置vue3开发环境
node -v //node版本10以上
(怎么安装多个node版本）
官网： https://cli.vuejs.org/zh/
安装或者升级：npm install -g @vue/cli
查看版本：vue --version
保证vue-cli版本在4.5.0以上，这个版本以上的vue-cli才能支持vue3
创建项目(两种方式~)
1.vue creat vue3-basic (回车)
//选项中没有vue 3 Preview，说明vue-cli是旧的版本，
//以下为创建步骤
//按上下箭头可以在选项中进行切换，按空格进行选择，
2.启动图形化界面创建
vue ui
项目文件结构分析和推荐插件安装
eslint插件
//解决eslint不生效的问题
//新建文件夹.vscode
//.vscode下新建文件settings.json
Vetur插件
//打vue 出现vue格式的文件
//在不同模板上提示指令
vue3--ref的妙用
在vue3中不需要写data和methods
可以用setup(){}中写方法
//setup---准备
//在data,computed,methods和生命周期函数之前运行的
//在这个方法中我们没法访问到this,
//在setup中我们需要和data中一样的一个响应式的对象，
//这时候不仅仅像data中那样之前返回一个对象，它就是响应式的，
//我们要使用vue3提供的一个API,它称之为ref
//import { ref } from 'vue'
//ref是一个函数，它接受一个参数，返回的是一个神奇的响应式对象
//setup(){
// const count = ref(0) //ref她它是一个函数，我们传入一个初始值，这个初始值是0
// } //这个时候count就是一个响应式对象了
//此时，鼠标放在count上，ts显示count是一个ref类型
//响应式对象在未来可以检测到改变，并作出对应的响应
//这时候这个对象的值在模板中要展示，首先把这个值返回出去，返回一个对象，
setup(){
const count = ref(0)
return {
count //我们称这个key也叫count,之后就可以省略掉这个key：value的写法，直接返回count
}
}
//这时我们就可以展示{{count}}
// 返回这个对象，包括key为count的对象，告诉模板，你可以在tempilate中使用count这个变量了，
要使用这样导出的方式是不是有点繁琐？
要写好多return
其实vue3是有意设计成这样的，为了达到上节所说的目标，
我们需要精确控制哪些属性和方法要被导出使用，可以更好的追踪引用和更新的情况，
//展示完毕以后，可以更新一个值了，添加一个按钮，
//添加一个方法，点击一下，+1
//在vue2中方法都是写在methods中的，现在我们可以在setup中写方法，
//也非常简单，其实它就是一个纯的javascript,毫无特殊
setup(){
const count = ref(0)
const increase = ()=>{
count.value++ //注意：count是一个充满魔法的响应式对象，要更新它不能直接在count上更新
} //count上边有一个值：value,它本身是一个object,value才是真正保存它值的地方
return {
count,
increase //假如你在模板中想使用它，记得导出去
}
}
刚才我们展示了响应式对象ref和方法（一个普通的函数），
现在来创建一个计算值computed-value,还是在setup中创建，
我们需要另一个API,computed
computed是一个函数，
它有一个参数，这个参数是一个函数回调，在这个回调中我们可以处理你想返回的值，
import { ref,computed } from 'vue'
setup(){
const count = ref(0)
const double = computed(()=>{
return count.value*2
})
const increase = ()=>{
count.value++
}
return {
count,
increase,
double //假如你在模板中想使用它，记得导出去
}
}
//鼠标移至dobule上可以看到dobule是computedRef,
//它也是一个类似ref对象的数据类型，它可以直接在模板中进行使用
vue3--reactive
上节课我们介绍了setup方法，还有ref和computed的API,
把javascript的原始类型转换成响应式的对象，
我们发现使用ref一般传入的是原始类型，而且几个变量count/double/increase都分散在各处,
有没有什么办法把这几个变量都包裹在一个对象中呢？
引入一个新的API---reactive
import {ref,computed,reactive} from 'vue'
它和ref非常相似，它也是一个函数，只不过它里面的参数不是一个原始类型，
而是一个object，这样我们就可以把一系列的响应式数据放进去，
//改造一下
setup() {
const count = ref(0)
const double = computed(() => {
return count.value * 2
})
const increase = () => {
count.value++
}
const data = reactive({ //reactive参数是一个对象{}
count:0,
increase:()=>{data.count++}, //reactive生成的响应式对象修改里面的值的时候，比如data.count,我们不需要.value了，
//我们直接把它当作对象的一项操作就好了
double:computed(()=>{data.count*2})
})
return {
}
},
//这时候我们发现data标红，出现了类型错误，
//这是因为在回调中，只用data.count会造成类型推论的循环，
//由于ts的局限性，vue3暂时没法解决这个问题，
//它会自动将data推断成any类型，
//将double去掉，报错消失，鼠标移至data,显示推断出了正确的类型，
//解决方案就是我们需要显示的给data指定一个类型，
//这里可以先不管这个警告，它不会影响最终结果，
//或者可以新建一个类型，
interface DataProps{
count:number;
double:number;
increase:()=>void
}
//以下不再报错
setup() {
const count = ref(0)
const double = computed(() => {
return count.value * 2
})
const increase = () => {
count.value++
}
const data: DataProps = reactive({
count:0,
increase:()=>{data.count++},
double:computed(()=>{data.count*2})
})
return {
data //值返回出去
}
}
//{{data.count}}
//{{data.double}}
//@click="data.increase"
优化一下（data写的太多）
可以用es6的spread操作，把对象展开，
// return {
// ...data //值返回出去
// }
// return {
// count:data.count,
// count:data.increase,
// count:data.double
// }
//以上写法在页面上做操作也没反应
//原因：
//鼠标移至data.count，可以发现是number类型，就是普通的javascript类型，
//而并不是响应式的数据，
//响应式是一个ref类型的数据，
//只有响应式的类型在模板中表现才是响应式的，
//我们把这些值从响应式的对象中取出来，就代表他们会失去响应式的活力，
//变成普通的javascript类型，现在它就是个number,所以它自然就不会自动更新了，
针对这个问题，vue3推出了API--toRefs()
import {ref,computed,reactive,toRefs} from 'vue'
//顾名思义它就是一个函数，它接受一个reactive对象作为参数，返回一个普通的对象，
//这个对象的每一项都变成了ref类型的对象，
setup() {
const count = ref(0)
const double = computed(() => {
return count.value * 2
})
const increase = () => {
count.value++
}
const data: DataProps = reactive({
count:0,
increase:()=>{data.count++},
double:computed(()=>{data.count*2})
})
const refData = toRefs(data)
//refData.double //鼠标移至refData.double，显示ref类型
return {
...refData
}
}
// 以上可以正常运行了
//特别注意：模板中应用的是否为响应式数据类型，这样才能根据你的数据改变做出模板更新的工作，
ref和reactive的区别：
ref和reactive的区别：
//用写普通标准的javascript来类比，
//第一种：(类似ref)
let x = 0
let y = 0
function updataNumber(){
x= 2
y= 3
}
//第2种：(像在用reactive)
const pos = {
x:0,
y:0
}
function updataObject(){
pos.x= 2
pos.y= 3
}
//这样会遇到和reactive一样的问题，
//x,y必须和对象在一起才能保持引入，
// const { x } = pos
// pos.x = 3 //x还是旧的值
//这样会丧失它的响应式
使用 ref 还是 reactive 可以选择这样的准则:
第一，就像刚才的原生 javascript 的代码一样，像你平常写普通的 js 代码选择原始类型和对象类型一样来选择是使用 ref 还是 reactive。
第二，所有场景都使用 reactive，但是要记得使用 toRefs 保证 reactive 对象属性保持响应性。
这节课我们学习了reactive语法，他是和ref对应的一个生成响应式对象的语法，
特别注意，如果它的属性单独拿出来可能会丧失响应性，
我们可以toRefs来解决这个问题。
网友评论