Vue3笔记（1）

1.创建：

(1)传统vue2创建的方法

(2)vite创建：

2.setup属性：

相当于data和computed和methods的属性

setup(){
			//数据
			let name = '张三'
			let age = 18
			let a = 200

			//方法
			function sayHello(){
				alert(`我叫${name}，我${age}岁了，你好啊！`)
			}
			function test2(){
				console.log(name)
				console.log(age)
				console.log(sayHello)
				console.log(this.sex)
				console.log(this.sayWelcome)
			}

			//返回一个对象（常用）
			return {
				name,
				age,
				sayHello,
				test2,
				a
			}

			//返回一个函数（渲染函数）
			// return ()=> h('h1','尚硅谷')
		}

3.ref函数：

import {ref} from 'vue'//先引入

setup(){
    //数据
    let name = ref('张三')
    let age = ref(18)
    let job = ref({
      type:'前端工程师',
      salary:'30K'
    })

    //方法
    function changeInfo(){
      name.value = '李四'
      age.value = 48
      job.value.type = 'UI设计师'
      job.value.salary = '60K'
      //直接改的话：name="wwww";不可以
    }

    //返回一个对象（常用）
    return {
      name,
      age,
      job,
      changeInfo
    }
  }

4.reactive函数

也可用来检查数组的变化

可用来代替ref:

	import {reactive} from 'vue'
	export default {
		name: 'App',
		setup(){
			//数据
			let person = reactive({  
				name:'张三',
				age:18,
				job:{
					type:'前端工程师',
					salary:'30K',
					a:{
						b:{
							c:666
						}
					}
				},
				hobby:['抽烟','喝酒','烫头']
			})

			//方法
			function changeInfo(){
				person.name = '李四'
				person.age = 48
				person.job.type = 'UI设计师'
				person.job.salary = '60K'
				person.job.a.b.c = 999
				person.hobby[0] = '学习'
			}

			//返回一个对象（常用）
			return {
				person,
				changeInfo
			}
		}
	}

5.reactive函数和ref的对比

6.在setup方法中两个注意的点：

（1）setup中的传参：

子类：

		setup(props,context){
			// console.log('---setup---',props)
			// console.log('---setup---',context)
			// console.log('---setup---',context.attrs) //相当与Vue2中的$attrs
			// console.log('---setup---',context.emit) //触发自定义事件的。
			console.log('---setup---',context.slots) //插槽
			//数据
			let person = reactive({
				name:'张三',
				age:18
			})

			//方法
			function test(){
				context.emit('hello',666)//子类调用父类传递的hello方法
			}

			//返回一个对象（常用）
			return {
				person,
				test
			}
		}

父类：

<template>
	<Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷">//父类传递函数
		<template v-slot:qwe>
			<span>尚硅谷</span>
		</template>
		<template v-slot:asd>
			<span>尚硅谷</span>
		</template>
	</Demo>
</template>

<script>
	import Demo from './components/Demo'
	export default {
		name: 'App',
		components:{Demo},
		setup(){
			function showHelloMsg(value){
				alert(`你好啊，你触发了hello事件，我收到的参数是:${value}！`)
			}
			return {
				showHelloMsg
			}
		}
	}
</script>