Vue 3.0响应式API案例

迈不过友情╰ 2023-10-01 17:01 41阅读 0赞

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

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

获取子组件中的data  
子组件

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 调用也是一样的。

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>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAdGVhX3llYXI_size_20_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAdGVhX3llYXI_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d47d5dcc3f5540baba27ab53f0f5b5b0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAdGVhX3llYXI=,size_20,color_FFFFFF,t_70,g_se,x_16