Vue 3.0响应式API案例

什么是Proxy
proxy翻译过来的意思就是”代理“，ES6对Proxy的定位就是target对象(原对象)的基础上通过handler增加一层”拦截“，返回一个新的代理对象，之后所有在Proxy中被拦截的属性，都可以定制化一些新的流程在上面，先看一个最简单的例子。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>reactive方法和watchEffect方法</title><script src="https://unpkg.com/vue@next"></script>
</head><body><div id="app"><post-item :post-content="content"></post-item></div><script>//创建组件;const { reactive, watchEffect } = Vue;//创建常量;const state = reactive({ count: 0 });//函数方法;watchEffect(() => {document.body.innerHTML = `商品库存为：${state.count}`});</script>
</body></html>

其实ref除了可以获取本页面的dom元素，还可以拿到子组件中的data和去调用子组件中的方法

获取子组件中的data
子组件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ref方法</title><script src="https://unpkg.com/vue@next"></script>
</head><body><div id="app"><post-item :post-content="content"></post-item></div><script>const { ref, watchEffect } = Vue;//创建函数const state = ref(0)watchEffect(() => {document.body.innerHTML = `商品库存为:${state.value}台`});</script>
</body></html>

vue3 中的 computed 的使用，由于 vue3 兼容 vue2 的选项式API，所以可以直接使用 vue2的写法，这篇文章主要介绍 vue3 中 computed 的新用法，对比 vue2 中的写法，让您快速掌握 vue3 中 computed 的新用法。

组合式 API 中使用 computed 时，需要先引入：import { computed } from “vue”。引入之后 computed 可以传入的参数有两种：回调函数和 options 。具体看看它是如何使用的?

一、函数式写法
在vue2中，computed 写法：

computed:{ sum(){ return this.num1+ this.num2 } }
在vue3 如果使用选项式API也可以这样写，主要看下组合式API的使用。

示例1：求和

import { ref, computed } from “vue” export default{ setup(){ const num1 = ref(1) const num2 = ref(1) let sum = computed(()=>{ return num1.value + num2.value }) } }
调用 computed 时，传入了一个箭头函数，返回值作为 sum 。相比之前，使用更加简单了。如果需要计算多个属性值，直接调用就可以。如：

let sum = computed(()=>{ return num1.value + num2.value }) let mul = computed(()=>{ return num1.value * num2.value })
该示例过于简单，看不明白的可在文章后面阅读完整实例1。

二、options 写法
计算属性默认只有 getter ，在需要的时候也可以提供 setter 。在vue2中用法如下：

computed:{ mul:{ get(){ // num1值改变时触发 return this.num1 * 10 }, set(value){ // mul值被改变时触发 this.num1 = value /10 } } }
mul 属性是给num1 放大10，如果修改 mul 的值，则 num1 也随之改变。

在 vue3 中：

let mul = computed({ get:()=>{ return num1.value *10 }, set:(value)=>{ return num1.value = value/10 } })
这两种写法不太一样，仔细观察区别不大，get 和 set 调用也是一样的。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>computed方法</title><script src="https://unpkg.com/vue@next"></script>
</head><body><div id="app"><p>原始字符串：{{msg}}</p><p>反转后的字符串:{{revmsg}}</p></div>3VrzcxJNG YYYYFUO[[PONPOPIWDAEWZSW55z[,[,]]]]<script>const { ref, computed } = Vue;const vm = Vue.createApp({setup() {const msg = ref('人世几回伤往事');const revmsg = computed(() =>msg.value.split('').reverse().join(''));return {msg,revmsg}}});vm.mount('#app');</script>
</body></html>

Vue3.0使用组件创建树形项目分类综合案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用组件创建树状项目</title><script src="https://unpkg.com/vue@next"></script>
</head><body><div id="app"><category-component :list="categories"></category-component></div><script>const CategoryComponent = {name: 'catComp',props: {list: { type: Array }},template: `<ul><template v-if="list"><li v-for="cat in list">{{cat.name}}<catComp :list="cat.children"/></li></template></ul>`}//继续const app = Vue.createApp({data() {return {categories: [{name: 'JAVA编程讲义',children: [{name: 'JAVA编程思想',children: [{ name: 'HTML开发技术' },{ name: 'JS开发技术' },{ name: 'Vue.js开发技术' }]}, {name: 'C#开发指南'}]},{name: 'JAVA编程讲义',children: [{name: 'JAVA编程思想',children: [{ name: 'C#宿舍管理系统实战' },{ name: 'Android开发技术' },{ name: '鸿蒙开发技术' }]}, {name: '张晨光老师带你学Vue'}]}]}},components: {CategoryComponent}}).mount('#app');</script>
</body></html>

Vue 3.0响应式API案例相关推荐

【Vue 3.0 新特性（四）】Vue 3.0 响应式系统原理
文章前言笔记来源:拉勾教育大前端高薪训练营阅读建议:内容较多,建议通过左侧导航栏进行阅读 Vue 3.0 响应式系统原理基础回顾 Vue.js 响应式回顾 Proxy 对象实现属性监听多层属 ...
Vue.js 3.0 响应式 API 比 2.x 好在哪儿？
Hello,各位小伙伴,接下来的一段时间里,我会把我的课程<Vue.js 3.0 核心源码解析>中问题的答案陆续在我的公众号发布,由于课程的问题大多数都是开放性的问题,所以我的答案也不一定 ...
vue 2.0响应式源码实践，麻麻，我再也不怕被面试官提问啦
vue2.0/vue3.0响应式源码实践,麻麻,我再也不怕被面试官提问啦写在前面 vue2.0响应式源码实现 1. 先创建一个对象 2.实现observer方法 3.接下来我们对observer函数 ...
vue --- 2.0响应式补充
补充: 数组的响应式 // 对数组的方法进行重写 // 1. 不能影响本来的方法 // 2. 调用的时候可以找到它 let odlArrayPrototype = Array.prototype; l ...
vue3 响应式 API 之 ref
ref 是最常用的一个响应式 API,它可以用来定义所有类型的数据,包括 Node 节点和组件. 没错,在 Vue 2 常用的 this.$refs.xxx 来取代 document.querySel ...
详细介绍Vue的数据响应式
Vue.js的核心包括一套"响应式系统"."响应式",是指当数据改变后,Vue会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新 ...
vue 数组长度_深入理解Vue的数据响应式
什么是响应式当一个物体对外界的变化做出反应就叫响应式的,如"我打你一拳,你会喊疼". Vue的数据响应式就是对数据做出改变时,视图上也会做出相应的变化. 举个例子 1const ...
Vue数据绑定和响应式原理
Vue数据绑定和响应式原理当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
vue3.0响应式源码实践,vue3.0初体验
vue3.0响应式源码实践,vue3.0初体验镇楼图--杀生丸.jpg vue-next(vue3.0预体验) 1. 使用: 2.vue-next的目录结构 3. reactive内部实现作者上篇 ...

Vue 3.0响应式API案例

Vue 3.0响应式API案例相关推荐

最新文章

热门文章