1. 前言
vue3也是时候梳理了,千里之行始于足下
更详细的
vue3简介就不说了 直接上干货
2. 脚手架
vue/cli 4x以上
vue create 项目名
配置 可以选择默认 或者自定义 这里选择自定义配置 Manually select feature
3. props 用法
3.1 基本写法
props: { msg: String },
3.2 模板
<h1> 属性传值: {{ msg }}</h1> <input type="text" v-model="msg"> <hr />
3.3 传值
<HelloWorld v-if="showView === 1" msg="Welcome to Your Vue3 App"/>
3.4 分析
这块
props其实和v2没啥区别
4. data
4.1 数据
data() { return { name: "data " } },
4.2 模板
<h1>data: {{name}} </h1> <input type="text" v-model="name"> <hr />
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 使用 数据
<h1>setUp: {{state.msgSet}} </h1> <input type="text" v-model="state.msgSet"> <hr />
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 } },
<HelloWorld v-if="showView === 1" msg="Welcome to Your Vue3 App"/>
![XIZEU]_]9(EL)F~78NT5B`A.png](https://ucc.alicdn.com/pic/developer-ecology/ee10ef92e7254cb78e079b4bd4fc9580.png?x-oss-process=image/resize,w_1400/format,webp "XIZEU]_]9(EL)F~78NT5B`A.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 模板使用 数据
<hr /> <p>{{state.count}}</p> <p>{{doubleCounter}}</p>
6.3 分析
1.这里面其实是2个例子
2.1个是 数字 2倍的计算
3.1个是动态计算字符串长度
4.使用的时候注意,计算属性 直接
rerturn就行,不用包裹在state里
