学习vue3系列ref
基于vite初始化项目
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
项目生成之后,编写一个计数器组件,修改App.vue
里面的内容:
<template><button @click="change">count is: {{ count }}</button>
</template><script>
export default {setup () {let count = 0const change = () => count++return { count, change }}
}
</script>
现在要介绍的第一个API就是setup函数。setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。
1、调用时机
创建组件实例,然后初始化 props ,紧接着就调用setup 函数。从生命周期钩子的视角来看,它会在 beforeCreate 钩子之前被调用。
2、模板中使用
如果 setup 返回一个对象,则对象的属性将会被合并到组件模板的渲染上下文。
3、渲染函数 / JSX 中使用
setup 也可以返回一个函数,函数中也能使用当前 setup 函数作用域中的响应式数据:
import { h, ref, reactive } from 'vue'export default {setup() {const count = ref(0)const object = reactive({ foo: 'bar' })return () => h('div', [count.value, object.foo])}
}
4、参数 该函数接收 props 作为其第一个参数,注意 props 对象是响应式的,第二个参数提供了一个上下文对象,从原来 2.x 中 this 选择性地暴露了一些 property。
const MyComponent = {setup(props, context) {context.attrscontext.slotscontext.emit},
}
在 App.vue
中,点击事件绑定了 change
,然后修改了 count
,但是页面并没有发生改变,这是因为 setup
函数返回的对象中 count
不是响应式数据,那么如何创建响应式数据呢?此时就要掌握响应式系统 API,我们可以使用 ref
创建。
<template><button @click="change">count is: {{ count }}</button>
</template><script>
import { ref } from 'vue'
export default {setup () {let count = ref(0) // { value: 0 }const change = () => count.value++return { count, change }}
}
</script>
接受一个参数值并返回一个响应式且可改变的 ref
对象。ref
对象拥有一个指向内部值的单一属性 .value
。
当 ref
作为渲染上下文的属性返回(即在 setup()
返回的对象中)并在模板中使用时,它会自动解套,无需在模板内额外书写 .value
Vue 本身已经有 "ref" 的概念了。但只是为了在模板中获取 DOM 元素或组件实例 (“模板引用”)。新的 ref 系统同时用于逻辑状态和模板引用。
学习vue3系列ref相关推荐
- 学习vue3系列computed
响应式API中 computed 和之前的 computed 选项用法类似. 对于任何复杂逻辑,我们都可能使用计算属性.比如翻转字符串: <template><h1>{{ te ...
- 学习vue3系列reactive
vue3响应式API有ref和reactive,今天主要讲解reactive函数. <template><h1>{{ msg }}</h1><button @ ...
- 学习vue3系列watch
watch 函数用来侦听特定的数据源,并在回调函数中执行副作用.默认情况是懒执行的,也就是说仅在侦听的源变更时才执行回调. <template><button @click=&quo ...
- Vue3的Ref提案到底发生肾摸事了
Vue3的Ref提案到底发生肾摸事了 朋友们好,我是大圣,最近vue3的ref提案社区讨论的比较多,社区里我看了一下相关的rfc和知乎讨论,我发现很多年轻人不讲武德,今天也摸鱼写一点我的看法吧 先说结 ...
- 学习Vue3.0,先来了解一下Proxy
产品经理身旁过,需求变更逃不过. 测试姐姐眯眼笑,今晚bug必然多. 据悉Vue3.0的正式版将要在本月(8月)发布,从发布到正式投入到正式项目中,还需要一定的过渡期,但我们不能一直等到Vue3正式投 ...
- 学习Vue3.0,先从搭建环境开始
Bug源测试,上线来几个.愿君多修改,今夜眼难合. 这是小编关于Vue3.0系列文章的第二篇,本文将带您从零搭建一个基于Vue3.0与vite的Vue3.0开发环境,通过本文的学习,你将学习到以下内容 ...
- [转]《零基础入门深度学习》系列文章(教程+代码)
无论即将到来的是大数据时代还是人工智能时代,亦或是传统行业使用人工智能在云上处理大数据的时代,作为一个有理想有追求的程序员,不懂深度学习(Deep Learning)这个超热的技术,会不会感觉马上就o ...
- SQL Server 2008/2012中SQL应用系列及BI学习笔记系列--目录索引
SQL Server 2008中的一些特性总结及BI学习笔记系列,欢迎与邀月交流. 3w@live.cn ◆0.SQL应用系列 1.SQL Server 2008中SQL增强之一:Values新用途 ...
- BP算法双向传_链式求导最缠绵(深度学习入门系列之八)
摘要: 说到BP(Back Propagation)算法,人们通常强调的是反向传播,其实它是一个双向算法:正向传播输入信号,反向传播误差信息.接下来,你将看到的,可能是史上最为通俗易懂的BP图文讲解, ...
最新文章
- 2020年人工神经网络第二次作业-参考答案第四题
- MFC拖拽文件到任意EDIT控件
- 苹果7手机计算机怎么看历史记录,苹果手机safari书签及其历史记录怎么恢复
- php如何进行错误处理,php如何自定义错误处理
- codevs 1576 最长严格上升子序列
- 快速傅里叶变换应用之二 hdu 4609 3-idiots
- 【Java并发编程】之十一:线程间通信中notify通知的遗漏
- linux常用命令(ubuntu)
- js实现数据流(日志流,报警信息等)滚动展示,并分页(含实现demo)
- excel多元线性拟合_[求助]excel里面的linest函数中多元回归怎么用啊?
- swift混编调用oc编写的Xib UIView出现[Storyboard] Unknown class in Interface Builder file.问题的解决
- Excel2016 保存\复制 卡死问题解决
- 超声波传感器(CHx01ICU-x0201ICU-30201) - 资源抢先看(资料获取)
- python提取cad坐标_教你一个实用的CAD坐标提取技巧
- 数电票试点扩围 百望云一体化解决方案助力企业数字化升级
- Linux如何复制文件和文件夹到另一个目录
- Typora导出word文档自动生成目录
- 工业CT分辨率——空间分辨率和密度分辨率
- AMM敏捷成熟度评估框架介绍
- java 单例模式双重检索_单例模式:为什么要双重检测