1. 前言
vue3也是时候梳理了,千里之行始于足下
更详细的vue3简介就不说了 直接上干货
2. 脚手架
vue/cli 4x以上
vue create 项目名
配置 可以选择默认 或者自定义 这里选择自定义配置 Manually select feature
1.png
3. props 用法
3.1 基本写法
props: {
msg: String
},
3.2 模板
属性传值: {{ msg }}
3.3 传值
3.4 分析
这块
props其实和v2没啥区别
4. data
4.1 数据
data() {
return {
name: "data "
}
},
4.2 模板
data: {{name}}
4.3 分析
和
v2区别也不大
5. setUp 初识
这个
v3新增的 组合式API 的一个重点,简单来玩下
5.1 主要代码
setup(){
// return {
//默认不是响应式数据
// msgSet:"这是好消息"
// }
const state = reactive({
msgSet:"这才是响应式数据"
})
//暴露给模板使用 这里不能展开,会破坏内部结构
return {state}
},
5.2 分析
1.这个 setup 可以返回数据
2.这个返回的数据默认不是响应式数据
3.响应式数据需要做单独的处理reactive
import {reactive,computed} from "vue";
4.返回的数据 必须是原来的结构 ,不能进行
...展开,会破坏内部结构,导致不是响应式数据
5.3 使用 数据
setUp: {{state.msgSet}}
5.4 参数1 props
setup(props) {
console.log("---------", props)
// 不是响应式数据了
// return{
// msgSet:"新的写法"
// }
// ****************** 就是原来的 data
const state = reactive({
msgSet: "响应式数据",
count: 9
})
// **************** 计算属性
const doubleCounter = computed(() => {
return state.count * 2
// return state.msgSet.length
})
// 暴露出去 使用
return {
state,
doubleCounter
}
},
1.png
5.5 参数2
setup(props, { attrs, slots, emit }) {
...
}
6. computed 计算属性
6.1 代码
const state = reactive({
msgSet: "响应式数据",
count: 9
})
// **************** 计算属性
const doubleCounter = computed(() => {
return state.count * 2
// return state.msgSet.length
})
// 暴露出去 使用
return {
state,
doubleCounter
}
6.2 模板使用 数据
{{state.count}}
{{doubleCounter}}
6.3 分析
1.这里面其实是2个例子
2.1个是 数字 2倍的计算
3.1个是动态计算字符串长度
4.使用的时候注意,计算属性 直接rerturn就行,不用包裹在state里
参考资料
v2和v3响应式原理对比