vue3.0 setup

(1)setup函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点
(2)之前的data、声明周期、自定义函数都可以放置在内
(3)setup是围绕beforeCreate和created生命周期钩子运行的
	beforeCreate和created钩子中编写的任何代码都应该直接在setup函数中编写。
(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进行观测和响应
			不要直接使用解构赋值,会使得参数失去响应性,因为参数是通过Object.definePropery来监听的,使用ref、reactive解构则不会丢失
			若要解构:const { title } = toRefs(props)
		
		(2)context:
			上下文对象            对应之前vue2的
			    context.attrs    this.$attrs 	 组件标签上的属性(非响应式对象)
			    context.slots	 this.$slots	 插槽(非响应式对象)
			    context.emit 	 this.$emit		 标签上自定义的触发事件(方法)
			    	context.emit('自定义事件名',参数)
			    context.expose	定义向外暴露的内容,使得可以通过ref获取到
			   		expose({...})	在setup中非return出去的内容,无法通过ref获取
			   		
		    无法访问:因为是在组件创建实例之前指向
		        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', ["哇咔咔"])	还可以直接返回一个渲染函数,将替换模板中的内容
			
			方式三:返回jsx
				return  () => <div ref={root} />
				
			方式四:注意此时组件已经变成了一个异步组件,可使用Suspense悬挂展示
			
				可以返回一个成功状态的Promise对象,会将成功态的[[PromiseResult]]结果作为返回值
				return new Promise((resolve,reject)=>{	也可返回一个Promise对象,使得组件为异步的
					...
					resolve({
						数据
					})
				})
			 	
			 	return await ...	
	}
})

代码示例:

<template>
  <div id="nav">
    <!-- <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> -->

    <div @click="fn">{{count.val}}</div>
  </div>
  <!-- <router-view/> -->
</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>