vue3小知识:setup中生命周期和2 一 一对应,调用方法为on 加vue2名字,不能使用beforeCreated 和created ,因为setup 在两者之间调用,可以直接写在setup中,新增onRenderTracked(每次渲染后重新收集响应式依赖).onRenderTriggered(每次页面渲染被触发时)
Vue3小知识:现在使用createApp()可以创建多个实例,任何全局改变Vue 行为的API都会移动到当前实例上
vue3小知识:teleport传送门可以使用 to ="标签",把当前标签挂载到指定位置上!
Vue3小知识:setup是实例被完全初始化之前创建的,不能在内部使用this ,外部methods 可以调用setup()
Vue3小知识:
js基本类型如果要变成响应式在setup中使用,需要使用ref包装(proxy代理),通过xx.value 调用
如果是非基础类型可以用reactive进行包装来达到响应式的目的
可以使用readOnly包装数据对响应式数据做限制
可以使用toRefs来对响应式数据进行解构,解构后的值也为响应式
vue3小知识
toRefs 解构出来的值不会对本身不存在的值做响应式,这时候可以使用toRef
setup(props,context)其中context 有const {attrs, slots, emit}=context 三个值
attrs: None-Props 属性(未通过props 传递的属性)
slots: 父组件传递过来的slot值,可以调用slots.default()来拿到值,可以用h函数的第三个值调用slots.default()来达到渲染的目的
emit:可以直接定义函数通过emit触发,例如emit('函数名'),定义的函数要return
vue3小知识(setup中使用)
计算属性:需要引入computed并调用此方法,在回调中执行逻辑,可以接收一个对象,里面可以写set和get 方法
监听:需要引入watch,调用watch(监听值,callback),如果监听的是引用类型需要watch(()=>引用类型.值,callback),如果是多个值,可以传一个数组,接收时也为一个数组,可以通过接收返回值调用(惰性,可以传递第三个参数变为非惰性,和2一样)
watchEffect直接接收一个回调,不需要传递需要监听的内容,只要内部有外部数据的引用就会调用,自动感知,可以通过接收返回值调用,结束监听(非惰性,立即执行,不能拿到之前的值)