Vue 3.0响应式API案例

张哥编程

发布于 2024-12-17 15:18:02

2550

什么是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>