Vue3 composition API总结

使用composition API 来写项目

以前我使用的是大家都使用的结构来写vue代码，可能就是

import { defineComponent } from 'vue'
export default defineComponent ({
	name: 'testProject',
	data: () {
		const name = 'ddydyt'
		return { name }
	},
	methods: {
		const showName = () => {
			console.log(this.name)
		}
	}
})

现在我使用了setup方法，是vue3的组合式API新增的

import { defineComponent } from 'vue'
export default defineComponent ({
	name: 'testProject',
	setup() {
		const name = 'ddydyt'
		const showName = () => {
			console.log(name)
		}
	}
})

我所知道的setup里面的注意点

		1. 里面是没有this指向的，里面的this是undefined
		2. setup函数可以直接代替 data 和 methods , 方法和数据都可以直接写在setup里面
		3. 如果要使用 从 父组件 传过来的数据，需要在setup里面传入props参数，像这样 setup(props),调用父组件传过来的参数，应该使用  props.xxx 来使用某个传过来的参数
		4. const 声明的常量的值可以用vue3里面的 ref() 来修改
		5. 如果是需要 用在 html里面的变量或常量，需要在setup()方法末尾的return中，返回出来

我所知道的注意点 1

		如果实在是需要使用this的话，是可以使用vue里面的一个方法，叫 getCurrentInstance()方法，使用方法如下:

import { defineComponent, getCurrentInstance } from 'vue'
export default defineComponent ({
	name: 'testProject',
	setup() {
		const { proxy } = getCurrentInstance()
		const showName = () => {
			console.log(proxy)  // 这个应该是vue实例吧, proxy就是 this
		}
	}
})

我所知道的注意点 3

		父组件代码示例如下:

<template>
	<div>
		<Children :val="value" />
	</div>
</template>

import { defineComponent } from 'vue'
import Children from './components/Children/index.vue'   //引入子组件
export default defineComponent ({
	name: '我是父组件js部分',
	components: { Children },  // 这里需要加入 components属性，里面写入传入的子组件
	setup() {
		const value = 'ddydyt'
		return { value }
	}
})

	子组件代码示例如下:

import { defineComponent } from 'vue'
const Children =  defineComponent ({
	name: '我是子组件js部分',
	props: { val: String },  //子组件接收时需要写一个props属性，并把接收来的值说明一下类型
	setup(props) {				// 这里需要在setup里面写入 props
		console.log(props.val)
		return {}
	}
export default Children
})

我所知道的注意点 4

import { defineComponent, ref } from 'vue'
export default defineComponent ({
	name: 'testProject',
	setup() {
		const name = ref('ddydyt')
		console.log(name.value, 'name的值')  // 打印name的时候需要 加.value来展示，不加value的话，好像name是具有响应性的
		/** name 赋值给test */
		const test = name.value
		
		/** 给name重新赋值 */
		name.value = 'dyt'
	}
})