Vue 3.0响应式API案例
Posted tea_year
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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案例的主要内容，如果未能解决你的问题，请参考以下文章