vue3.0 setup

迷南。 2021-07-25 01:54 573阅读 0赞

(1)setup函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点
    (2)之前的data、声明周期、自定义函数都可以放置在内
    (3)在创建组件之前执行,初始化props,紧接着就调用setup函数,从生命周期钩子的视角来看,它会在beforeCreate钩子之前被调用
    (4)具有hooks随处使用的特性,也是mixins的强化版,比mixins更加灵活
    
    实例方法
        component
        config
        directive
        mixin
        mount
        provide
        unmount	卸载应用实例的根组件
        use
        version
    	
    1、使用
    import {defineComponent,ref,h} from 'vue';
    
    export default defineComponent({	若要获取传递给setup()的参数的类型推断,使用defineComponent是需要的。
    
    	setup(props,context){
    		
    		(1)props:
    			组件传递的参数,是响应式的,可以通过使用watchEffect或watch进行观测和响应
    			不要直接使用解构赋值,会使得参数失去响应性
    			若要解构:const { title } = toRefs(props)
    		
    		(2)context:
    			上下文对象            对应之前vue2的
    			    context.attrs    this.$attrs 	 组件标签上的属性(非响应式对象)
    			    context.slots	 this.$slots	 插槽(非响应式对象)
    			    context.emit 	 this.$emit		 标签上自定义的触发事件(方法)
    			    	context.emit('自定义事件名',参数)
    			   
    		    无法访问:因为是在组件创建实例之前指向
    		        data
    			    computed
    			    methods
    			    
    			解构:
    				context是一个普通的JavaScript对象,也就是说,它不是响应式的,可以直接解构
    				attrs和slots是内部组件实例上相应值的代理。这样可以确保它们即使在更新后也始终会显示最新值,以便我们可以对它们进行结构分解,而不必担心访问老的引用：
    				但避免对内部的属性进行解构,并始终以attrs.x或slots.x的方式使用
    			    
    		(3)this指向问题:
    			因为setup()是在解析其它组件选项之前被调用的,所以setup()内部的this的行为与其它选项中的this完全不同
    		
    		(4)更好的模块化问题:
    			可以从其他文件引入函数等,然后在setup中执行,其他文件中可以使用v3的组合式api(需先导入),但必须在setup中调用
    		 
    		(5)return返回值方式:
    			返回的内容可以在命令式api中this.x访问到
    			方式一:
    				return{
    					返回的属性和方法,在setup外部能够使用,返回的普通属性不是响应式的,即改变不会更新视图
    				}
    			方式二:
    				return () => h('div', ["哇咔咔"])	还可以直接返回一个渲染函数,将替换模板中的内容
    				
    			方式三:注意此时组件已经变成了一个异步组件,可使用Suspense悬挂展示
    			
    				可以返回一个成功状态的Promise对象,会将成功态的[[PromiseResult]]结果作为返回值
    				return new Promise((resolve,reject)=>{	也可返回一个Promise对象,使得组件为异步的
    					...
    					resolve({
    						数据
    					})
    				})
    			 	
    			 	return await ...	
    	}
    })

代码示例:

<template>
      <div id="nav">
        
    
        <div @click="fn">{ { count.val}}</div>
      </div>
      
    </template>
    
    <script lang='ts'>
    // ,ref, reactive
    import { defineComponent,ref,reactive} from 'vue';
    
    export default defineComponent({ 
      name:"App",
      data(){ 
        return{ 
          // name:'jack'
        }
      },
      setup(){ 
        let count=ref({ val:1});
    
        const fn=function(){ 
          count.value.val++;
          console.log(count.value.val)
          console.log(count);
        }
        
        return { 
          count,
          fn
        }
        // return () => h('div', ["哇咔咔"])
      },
      mounted(){ 
        console.log();
      }
    })
    
    </script>
    
    
    <style>
    #app { 
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    
    #nav { 
      padding: 30px;
    }
    
    #nav a { 
      font-weight: bold;
      color: #2c3e50;
    }
    
    #nav a.router-link-exact-active { 
      color: #42b983;
    }
    </style>