vue3-data-setUp-computed
2021-09-13 本文已影响0人
云高风轻
1. 前言
vue3也是时候梳理了,千里之行始于足下
更详细的vue3简介就不说了 直接上干货
2. 脚手架
vue/cli 4x以上
vue create 项目名
配置 可以选择默认 或者自定义 这里选择自定义配置 Manually select feature
1.png
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"/>
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 模板使用 数据
<hr />
<p>{{state.count}}</p>
<p>{{doubleCounter}}</p>
6.3 分析
1.这里面其实是2个例子
2.1个是 数字 2倍的计算
3.1个是动态计算字符串长度
4.使用的时候注意,计算属性 直接rerturn就行,不用包裹在state里
