Vue3学习（未完待续）

Vue3

• vite 全新的前段开发工具 就是webpack的代替品
• npm init vite-app vue3test
• npm i
• 模板中可以没有根标签
• 安装vue3的测试工具

常用CompositionAPI

• setup 是vue3中的一个配置项

<script>
import {h} from 'vue' //返回一个渲染函数

export default{
	name:"app",
	setup(){//就是测试一下setup 失去了响应式
		let name ='11'
		let age = 10
		function sayHello(){}
	}
	return{//就直接使用插值语法
		name,
		age,
		sayHello
	}
}
<script>

• ref 函数

<script>
import {h} from 'vue' //返回一个渲染函数

export default{
	name:"app",
	setup(){//就是测试一下setup 失去了响应式
		let name =ref('11')//引用实现对象
		let age = ref(10)
		function sayHello(){
			name.value = 'tt'//动态修改
		
		}
	}
	return{//就直接使用插值语法
		name,
		age,
		sayHello
	}
}
<script>

• reactive 定义一个对象类型的响应式数据

obj = reactive({
	age:10
})

• 推荐使用reactive直接去存储数据
• vue中的响应式 是使用object.difneProperty（）对属性的读取，修改进行拦截 数据接触
• 新增属性不会更新 直接通过下标修改数组，界面不会自动更新
• vue2中设置没有的属性响应式 this.$set(this.persion,‘sex’,‘nv’) 删除响应式 delete this.persion.name
• 修改数据中的内容 this.$set(this.persion.hobby,0,‘逛街’) 使用splice
• 对于reactive和ref对比

const data = reactive({
	name:'ttt'//一般情况下使用功能这个区作为解决方案
})

• 组件注册还是用component
• setup 的注意点
  • setup 在beforecareate之前执行 只执行一次
  • 会受到2个参数 第一个参数props 组件外部向内部传输数据 这个是和vue三一样使用的 第二个参数 就是上下文 context 是一个对象 emit:[]出发自定义事件
  •