vue3.0js 非prop属性的值和setup函数的使用

小咪咪 2023-10-01 17:38 3阅读 0赞

非prop属性的值  
一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute。

因为显式定义的 prop 适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的 attribute，而这些 attribute 会被添加到这个组件的根元素上。

例如，想象一下你通过一个 Bootstrap 插件使用了一个第三方的 bootstrap-date-input 组件，这个插件需要在其 input 上用到一个 data-date-picker attribute。我们可以将这个 attribute 添加到你的组件实例上：

然后这个 data-date-picker=“activated” attribute 就会自动添加到 的根元素上。

<!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>Document</title>
        <script src="https://unpkg.com/vue@next"></script>
        <style>
            .bg1 {
        
                background: #C1FFE4;
            }
    
            .bg2 {
        
                width: 120px;
                ;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            <input-con class="bg2" type="password"></input-con>
        </div>
        <script>
            const vm = Vue.createApp({
        });
            vm.component('input-con', {
        
                // template: '<input class="bg1"',
                template: '<input class="bg1" type="text"',
                inheritAttrs: false,  //不会继承外部组件的属性；，即password不会覆盖text
            });
            //在指定的dom上装载应用程序;
            vm.mount('#app');
        </script>
    </body>
    
    </html>

Vue3 中的setup 一种是setup函数，一种是script setup  
setup函数  
setup函数原理说明  
由于setup 是在beforeCreate 和 create 生命周期阶段，组件还没有创建，即还没有进入 data 方法 阶段。  
setup 返回的结果集 作为 (传统写法)data 和 method 的值，确切点说是绑定到 组件对象的属性。

setup函数特性  
1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的  
2、setup函数是 Composition API（组合API）的入口  
3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用

setup 函数将接收两个参数，props&context  
Props ：props接收父组件传入的值，为Proxy对象，且为响应式，所以不能使用 ES6 解构，它会消除 prop 的响应性

setup 包含的生命周期  
onBeforeMount——挂载开始前调用  
onMount——挂载后调用  
onBeforeUpdate——当响应数据改变，且重新渲染前调用  
onUpdated——重新渲染后调用  
onBeforeUnmount——Vue实例销毁前调用  
onUnmounted——实例销毁后调用  
onActivated——当keep-alive组件被激活时调用  
onDeactivated——当keep-alive组件取消激活时调用  
onErrorCaptured——从子组件中捕获错误时调用

<!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>setup函数的案例</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
        <div id="app">
            <post-item :post-content="content"></post-item>
        </div>
        <script>
            //创建一个应用程序案例;
            const vm = Vue.createApp({
        
                data() {
        
                    return {
        
                        content: '越来越细'
                    }
                }
            });
            //创建组件;
            vm.component('PostItem', {
        
                //声明props
                props: ['postContent'],
                setup(props) {
        
                    Vue.watchEffect(() => {
        
                        console.log(props.postContent);
                    });
                },
                template: '<h3>{
        { postContent }}</h3>',
            });
            //在指定的DOM元素上装载应用程序实例的根组件;
            vm.mount('#app');
        </script>
    </body>
    
    </html>