vue3 学习之路1

setup函数

使用Composition API的入口
在beforeCreate之前调用
在setup中没有this

ref函数

返回一个响应式引用
name是一个响应式对象

<template><div id="app"><p>{{ name }}</p><p>{{ age }}<button type="button" @click="plusOne()">+</button></p></div>
</template><script>
import {ref} from 'vue'export default {setup() {const name = ref('hooli')const age = ref(18)function plusOne() {age.value++}return {name, age, plusOne}}
}
</script>

计算属性

没使用计算属性，单纯响应式

<template><div id="app"><p>{{ name }}</p><p><button type="button" @click="changeAge(-1)">-</button>{{ age }}<button type="button" @click="changeAge(1)">+</button></p><p>出生年份： {{ 2021 - age }}</p></div>
</template><script>
import {ref} from 'vue'export default {setup() {const name = ref('hooli')const age = ref(18)function changeAge(val) {age.value += val}return {name, age, changeAge}}
}
</script>

使用计算属性

<template><div id="app"><p>{{ name }}</p><p><button type="button" @click="changeAge(-1)">-</button>{{ age }}<button type="button" @click="changeAge(1)">+</button></p><p>出生年份： {{ year }}</p></div>
</template><script>
import {ref, computed} from 'vue'export default {setup() {const name = ref('hooli')const age = ref(18)const year = computed(() => {return 2021 - age.value})function changeAge(val) {age.value += val}return {name, age, changeAge, year}}
}
</script>

计算属性，getter && setter

<template><div id="app"><p>{{ name }}</p><p><button type="button" @click="changeAge(-1)">-</button>{{ age }}<button type="button" @click="changeAge(1)">+</button></p><p><button type="button" @click="changeYear(-1)">-</button>出生年份： {{ year }}<button type="button" @click="changeYear(1)">+</button></p></div>
</template><script>
import {ref, computed} from 'vue'export default {setup() {const name = ref('hooli')const age = ref(18)const year = computed({get: () => {return 2021 - age.value},set: val => {age.value = 2021 - val}})function changeAge(val) {age.value += val}function changeYear(val) {year.value = year.value + val}return {name, age, changeAge, year, changeYear}}
}
</script>

响应式对象 reactive

引入reactive，并创建reactive对象

<template><div id="app"><p>{{ data.name }}</p><p><button type="button" @click="changeAge(-1)">-</button>{{ data.age }}<button type="button" @click="changeAge(1)">+</button></p><p><button type="button" @click="changeYear(-1)">-</button>出生年份： {{ data.year }}<button type="button" @click="changeYear(1)">+</button></p></div>
</template><script>
import {computed, reactive} from 'vue'export default {setup() {const data = reactive({name: 'hooli',age: 18,year: computed({get: () => {return 2021 - data.age},set: val => {data.age = 2021 - val}})})function changeAge(val) {data.age += val}function changeYear(val) {data.year = data.year + val}return {data, changeAge, changeYear}}
}
</script>

如果页面想继续使用{{name}}，需要引入toRefs将响应式对象转变成普通对象

<template><div id="app"><p>{{ name }}</p><p><button type="button" @click="changeAge(-1)">-</button>{{ age }}<button type="button" @click="changeAge(1)">+</button></p><p><button type="button" @click="changeYear(-1)">-</button>出生年份： {{ year }}<button type="button" @click="changeYear(1)">+</button></p></div>
</template><script>
import {computed, reactive, toRefs} from 'vue'export default {setup() {const data = reactive({name: 'hooli',age: 18,year: computed({get: () => {return 2021 - data.age},set: val => {data.age = 2021 - val}})})function changeAge(val) {data.age += val}function changeYear(val) {data.year = data.year + val}return {...toRefs(data), changeAge, changeYear}}
}
</script>

setup函数

setup函数的参数：props, context
context相当于this

import {computed, reactive, toRefs} from 'vue'export default {props: {title: String},setup(props, context) {const data = reactive({name: 'hooli',age: 18,year: computed({get: () => {return 2021 - data.age},set: val => {data.age = 2021 - val}})})function changeAge(val) {data.age += valconsole.log(props.title)context.emit('title-changed')}function changeYear(val) {data.year = data.year + val}return {...toRefs(data), changeAge, changeYear}}
}

watch

import {computed, reactive, toRefs, watch} from 'vue'export default {props: {title: String},setup(props, context) {const data = reactive({name: 'hooli',age: 18,year: computed({get: () => {return 2021 - data.age},set: val => {data.age = 2021 - val}})})watch(() => props.title, (newTitle, oldTitle) => {console.log(newTitle, oldTitle)context.emit('title-changed')})function changeAge(val) {data.age += valconsole.log(props.title)context.emit('title-changed')}function changeYear(val) {data.year = data.year + val}return {...toRefs(data), changeAge, changeYear}}
}

vue3 学习之路1相关推荐

Redis学习之路(一)--下载安装redis
redis学习之路--下载安装redis windows安装redis 1.下载redis 2.安装 3.查看是否安装成功 windows安装redis 1.下载redis 网址:https://gi ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言先安装node.js环境 ...
学习之路-现代密码学基础-001
学习之路-现代密码学基础-第一章密码学概论转载于:https://www.cnblogs.com/vegetables-Adanos/p/5371420.html
拿下斯坦福和剑桥双offer，00后的算法学习之路
董文馨,00后,精通英语,西班牙语.斯坦福大学计算机系和剑桥大学双Offer,秋季将进入斯坦福大学学习. 10岁开始在国外上学:12岁学Scratch: 13岁学HTML & CSS: 14岁 ...
Markdown学习之路
Markdown学习之路作者:CFishHome 转载请注明地址:https://blog.51cto.com/12731497/2164274 Markdown是什么? Markdown是一个 W ...
[EntLib]微软企业库5.0 学习之路——第五步、介绍EntLib.Validation模块信息、验证器的实现层级及内置的各种验证器的使用方法——上篇...
本文是为后面的学习之路做铺垫,简单介绍下企业库中的Validation模块的一些相关知识,包括Validation模块的简介.用途.使用方法.默认提供的多种验证器的介绍等. 一.简介及用途在实际的项 ...
转载： Qt 学习之路 2归档
Qt 学习之路 2归档 http://www.devbean.net/2012/08/qt-study-road-2-catelog/
python之路 mysql 博客园_教为学：Python学习之路（二）：MySQLdb的几种安装方式，以及用Python测试连接MySql...
教为学:Python学习之路(二):MySQLdb的几种安装方式,以及用Python测试连接MySql Easy_install安装MySQLdb 很简单,以至于我不晓得该怎么说.一句话. sodu ...

vue3 学习之路1

setup函数

ref函数

计算属性

响应式对象 reactive

setup函数

watch

vue3 学习之路1相关推荐

最新文章

热门文章