Vue3vite实战知识点整理1

代码 setup 函数内，通过 ref、reactive 创建两个变量，如果 setup 返回一个对象，则对象的属性将会被合并到模板变量的渲染上下文，也就是在 template 模板里，可以使用 setup 函数返回的对象内容（包括函数方法）。

//改造App.vue<template><div>{{count}}{{state.foo}}</div>
</template><script>import {ref,reactive} from 'vue'export default{setup(){const count=ref(0)const state=reactive({foo:'bar'})return{count,state,}}}
</script>

<template><div>{{count}}{{state.foo}}</div>
</template><script>import {ref,reactive} from 'vue'export default{setup(){const count=ref(0)const state=reactive({foo:'bar'})setTimeout(()=>{count.value=1state.foo='foo'},2000)return{count,state,}}}
</script>

通过 ref、reactive 方法包裹的变量，会被赋予响应式的能力，也就是说你在 setup 函数内改变他们的值，模板内也会响应展示改变后的值

//h 函数是 createElement 的别名,//Vue 提供了createElement 来创建虚拟dom
setup 也可以返回一个函数，函数中也能使用当前 setup 函数作用域中的响应式数据

<template><div>{{count}}{{state.foo}}</div>
</template><script>import {ref,reactive,h} from 'vue'export default{setup(){const count=ref(1)const state1=reactive({foo:'bar'})return ()=>h('h1',[count.value,state1.foo])}}
</script>

通过 h 函数，将 count.value（在 setup 函数作用域内，需要使用 .value 获取值）和 object.foo 渲染到 h1 标签内。

props 对象：

<template><Test :count="count"></Test>
</template><script>
import { ref } from 'vue'
import Test from './components/Test.vue'export default {components: {Test},setup() {const count = ref(0)return {count}}
}
</script>子：src/components 下新增 Test.vue 组件<template><div>{{ count }}</div>
</template><script>
export default {name: 'Test',props: {count: Number},setup(props) {console.log('props', props)}
}
</script>

在页面中我们打印了 props，可以发现它被 Proxy 代理过，这是 Vue 3.0 实现响应式的核心 API，也就是说从父亲组件传到子组件的 count 变量，已经是响应式数据

并且在子组件内，可以通过 watchEffect 和 watch 观察到数据的变化情况

注意 props 不要进行解构，如 setup(...props)，这样会让 props 失去响应式。

// App.vue
...
setup() {const count = ref(0)setTimeout(() => {count.value = 100}, 2000)return {count}
}
...// Test.vue
...
import { watchEffect } from 'vue'
setup(props) {watchEffect(() => {console.log('props.count = ', props.count)})
}
...

context 上下文

ctx（context）参数提供了一个上下文对象，从原来的 Vue 2.0 中的 this 选择性的暴露一些属性。

ctx 为我们提供了三个属性，分别是：

attrs
slots
emit

attrs 为我们提供了最新传入的数据，在使用 attrs 时候，不能在 options 中声明 props ，否则 attrs 取不到变量

<template><div>{{ count }}</div>
</template><script>
import { watchEffect } from 'vue'
export default {name: 'Test',
//   props: {
//     count: Number
//   },setup(props,ctx) {console.log('props', props)console.log('ctx',ctx.attrs.count)return{attrs:ctx.attrs}}
}
</script>

子组件调用父组件传进来的方法，并且带上回调参数

子组件接收的方法，需要通过 emits 在 options 中注册，否则会报警告。通过上下文 ctx.emit 触发传进来的方法以及返回相应的回调参数

// App.vue
<template><Test :count="count" @add="add"></Test>
</template><script>
import { ref } from 'vue'
import Test from './components/Test.vue'export default {name: 'App'components: {Test},setup() {const count = ref(0)const add = (num) => count.value += numreturn {count,add}}
}
</script>// Test.vue
<template><div>{{ count }}</div><button @click="add">++++</button>
</template><script>
import { watchEffect } from 'vue'
export default {name: 'Test',props: {count: Number,add: Function},emits: ['add'],setup(props, ctx) {const add = () => {ctx.emit('add', 50)}return {add}}
}
</script>

Vue3vite实战知识点整理1相关推荐

【2022持续更新】大数据最全知识点整理-HBase篇
大数据最全知识点整理-HBase篇基础问题: 1.Hbase是什么 2.Hbase架构 3.Hbase数据模型 4.Hbase和hive的区别 5.Hbase特点 6.数据同样存在HDFS,为什么H ...
Java进阶3 - 易错知识点整理（待更新）
Java进阶3 - 易错知识点整理(待更新) 该章节是Java进阶2- 易错知识点整理的续篇: 在前一章节中介绍了 ORM框架,中间件相关的面试题,而在该章节中主要记录关于项目部署中间件,监控与性能优 ...
springboot知识点整理(2021)
springboot知识点整理参考网址 https://mp.weixin.qq.com/s/GjjxJt8OauumW_J2ps7tow Demo 脚手架项目地址: https://github. ...
C语言考研复试知识点整理
C语言考研复试知识点整理 1.由float x=3e-6,y=3e-6;不能得到x= =y的逻辑值为真. 解析:float类型的变量只能进行>或<运算,不能进行==运算 2.自增和自减运算 ...
【Android 面试基础知识点整理】
针对Android面试中常见的一些知识点整理,Max 仅仅是个搬运工.感谢本文中引用文章的各位作者,给大家分享了这么多优秀文章.对于当中的解析,是原作者个人见解,有错误和不准确的地方,也请大家积极指正 ...
mysql 存储引擎面试_搞定PHP面试 - MySQL基础知识点整理 - 存储引擎
MySQL基础知识点整理 - 存储引擎 0. 查看 MySQL 支持的存储引擎可以在 mysql 客户端中,使用 show engines; 命令可以查看MySQL支持的引擎: mysql> ...
mysql 全面知识点_Mysql知识点整理
1.存储引擎区别 MyISAM:不支持事物.仅支持表级锁.支持B+树索引 MEMORY:不支持事物.仅支持表级锁.支持B+树和HASH索引 InnoDB:支持事物.支持行级锁.支持B+树索引 2.锁机 ...
04741计算机网络原理知识点,04741计算机网络原理知识点整理.doc
04741计算机网络原理知识点整理 1.计算机网络大发展计算机网络从20世纪70年代开始发展,他的演变可以概括为面向终端的计算机网络.计算机-计算机网络.开放式标准化网络以及因特网广泛应用和高速网 ...
python基础知识整理-python入门基础知识点整理-20171214
一.知识点整理 1.python2与python3的区别: (1)宏观比对 python2 源码不标准,较为混乱,并且重复的代码很多. python3 源码统一了标准,同时也去除了重复代码. (2)编 ...

Vue3vite实战知识点整理1

Vue3vite实战知识点整理1相关推荐

最新文章

热门文章