import {createApp，h, ref, reactive, toRef, toRefs, computed, watch, watchEffect, provide，inject，readonly,
KeepAlive，Teleport, Transition, TransitionGroup，
onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,
onErrorCaptured,onRenderTracked,onRenderTriggered,onActivated,onDeactivated } from 'vue'
setup() {
const readersNumber = ref(0)
const book = reactive({ title: 'Vue 3 Guide' })
// 请注意这里我们需要显式调用 ref 的 value
return () => h('div', [readersNumber.value, book.title])
}
关于vue3中的 ref（）reactive（） toRef（） toRefs（）
1* ref: //底层会自动调用reactive（）
用途： 用于创建基本数据类型；（响应式）//底层会新增.value属性
特点：深拷贝 页面会及时更新
判断条件：使用isRef（）判断; //底层通过 __v_ref属性判断
2* reactive //底层用ES6的proxy，控制属性的操作
用途： 用于创建引用数据类型（响应式）；
特点：深拷贝 页面会及时更新
判断条件：使用isReactive()判断
3* toRef（）// 底层会对指定的单一对象属性进行toRef（）
用途：用于创建一个ref类型的数据
特点：浅拷贝 页面不会及时更新
4* toRefs（） //底层会遍历引用类型数据的每一项，依次执行toRef（）
用途：用于批量创建一个ref类型的数据
特点： 浅拷贝 页面不会及时更新
watch， watchEffect
区别：
1，watch 懒监听，只有数据源发生变化时才会执行； watchEffect， 每次都会监听
2.watch可以监听具体的某个数据发生变化，不可以监听到响应式数据对象内数据的变化； watchEffect可以监听到响应式数据对象内数据的变化。
3.watch可以监听到数据变化前与变化后的数据
let data = reactive({
count: 1
})
watch(data, (newValue, oldValue) => {
console.log('不能监听到data.count的变化' + '新值:' + newValue )
})
watchEffect(data.count, () => {
console.log('可以监听到data.count的变化')
})
组合式API的v-for用法
{{ item }}
Provide / Inject
用途：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。（祖先组件给子孙组件传递数据）
用法：
peovide inject只有在父子组件之间，数据才会双向更新
父组件 :
provide('todo': '长度')
provide('location', readonly（location)）
return {tode, location}
子组件：
setup() {
let todo = inject('title')
let location = inject('location')
retrun {
todo，
location //传递的是只读属性，因此不可以双向绑定
}
}
自定义指令directive——实现单击 Rerun 按钮，输入框将被聚焦。
//注册全局指令
const app = Vue.createApp({})
// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
// 当被绑定的元素挂载到 DOM 中时……
mounted(el) {
// 聚焦元素
el.focus()
}
}
//注册局部指令
directives: {
focus: {
// 指令的定义
mounted(el) {
el.focus()
}
}
}
// 模板中使用
//自定义指令 执行时机
created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加须要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用。
beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
mounted：在绑定元素的父组件被挂载后调用。
beforeUpdate：在更新包含组件的 VNode 之前调用
updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
beforeUnmount：在卸载绑定元素的父组件之前调用
unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。
//简单写法
app.directive('pin', (el, binding) => {
el.style.position = 'fixed'
const s = binding.arg || 'top'
el.style[s] = binding.value + 'px'
})
用法：
Teleport 通过标签
Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建 UI。
A
B
A
B
v-model
指令扩展为 modelValue 和 onUpdate:modelValue 在模板编译过程中，我们必须自己提供这些 prop
props: ['modelValue'],
emits: ['update:modelValue'],
render() {
return h(SomeComponent, {
modelValue: this.modelValue,
'onUpdate:modelValue': value => this.$emit('update:modelValue', value)
})
}
v-on
要处理 click 事件，prop 名称应该是 onClick
render() {
return h('div', {
onClick: $event => console.log('clicked', $event.target)
})
}
事件修饰符
.stop 执行 event.stopPropagation()
.prevent 执行 event.preventDefault()
.self 执行 if (event.target !== event.currentTarget) return
.ctrl, .alt, .shift, .meta 执行 if (!event.ctrlKey) return (将 ctrlKey 分别修改为 altKey, shiftKey, 或 metaKey)
引入 vue-router@next
npm i vue-router@next --save
1. //新建router.js
import {createRouter, createWebHashHistory} from 'vue-router'
import Home from './home.vue'
cosnt router = createRouter({
history: createWebHashHistory()
routes: [
{path: '/', component: Home}
]
})
export default router
在vue中写jsx语法
npm install @vue/babel-plugin-jsx -D
https://github.com/vuejs/jsx-next