Vue3快速上手

<template>
  <div @click="add">{{state.count}}</div>
</template>
<script>
import { reactive } from 'vue'; // 导入reactive函数用于创建响应式对象
export default {
  setup(){
    const state = reactive({count:0});
    // reactive创建的响应式对象state != {count:0}原对象，state是es6中的proxy类型的对象
    function add(){state.count++;} // 相当于method中定义的方法
    return {state, add} // 返回的变量才能在模板中访问
  }
}
</script>

<script setup>
  import { reactive } from 'vue';
  const state = reactive({count:0}); // 顶层的导入和声明都可以在同一组件的模板中使用
  function add(){state.count++;}
</script>

<script setup>
import { ref, reactive } 'vue';
const count = ref(0);
console.log(count.value); // setup作用域中count为{value:0}对象，访问其值需要用.value
let state = ref({count:0});
function add(){ // 操作对象时先使用value，再访问属性
  state.value.count++;
};
function stop(){state = {count:0};}; // 同样改变state引用的对象会导致响应式丢失
state.value = {count:9} // 响应式替换
// let {count} = state // 这种方式解构 count 为 undefined
let {count} = state.value // 这种方式解构count无响应式

const data = reactive({count:ref(0)})
console.log(data.count) // 深层的reactive响应式对象中嵌套ref，则对应ref会自动解包，无须data.count.value访问
// 当ref作为响应式的数组、map等集合类型的元素访问时则不会自动解包
const dataArr = reactive([ref('list')]);
console.log(dataArr[0].value);
</script>
<template>
  <!-- 模板中使用顶层属性count会自动解包，不需要.value
   对于非顶层Ref对象，模板表达式仅为简单取值时才会进行自动解包，其他情况会被渲染为Object -->
  <button @click="add">{{count}},state Count: {{state.count}}</button> 
  <button @click="stop">阻断响应式</button>
</template>

<script setup>
import { ref, computed } from 'vue'
const name = ref('Join');
const id = ref(123456);
const nameNumber = computed({ // 返回的将是一个Ref对象
  get(){return name.value + '/' + id.value}, 
  set(val) {[name.value, id.value] = val.split('/')}
})
console.log(nameNumber.value)
</script>

<template>
  <div v-bind="$attrs"></div>
  <div></div>
</template>

<script setup>
// 任何以v开头的驼峰式命名变量都可以被用作一个自定义指令，在模板中则可改为kebab-case的写法使用
const vFocus = { mounted: (el) => el.focus() } //在模板中启用 v-focus
</script>
<template>
  <input v-focus />
</template>

<script setup>
import { reactive, watch, watchEffect } from 'vue'
const obj = reactive({count:0});
const unWatch = watch( // 第一个参数为要侦听的对象，可以取String|Function|Object|Array
  () => obj.count, // 不可直接侦听一个响应式对象的属性值如obj.count，使用函数替换
  // 若直接监听一个reactive对象，会默认创建一个深层侦听，且newCount和oldCount相等，应为他们是同一个对象,且deep配置不生效
  async (newCount, oldCount) => {}, // 在vue2中使用箭头函数无法保留上下文
  {
    deep:true, // 绑定响应式对象时默认是深层侦听的，但也可以通过配置deep强制转换为深层侦听
    flush:'post', // 状态变化时，回调调用默认在DOM更新之前，flush选项可指定在DOM更新之后调用
    // ... 更多选项查看api文档
  }, 
)
const url = ref('http://..');
const data = ref(null);
const unWatchEffect = watchEffect(async () => { // watch仅当数据源变化时才会执行
  // watchEffect则可以在创建侦听器时立即执行
  // 如果传入函数产生了副作用effect则，vue会自动分析以依赖，并当依赖发生变化时再次执行回调
  const res = await fetch(url.value); // url.value会被自动加入侦听
  data.value = await res.json();
}, {flush:'post'}) // 同watch，指定了flush选项的watchEffect()别名watchPostEffect()
// 同步的语句中创建的侦听器才会自定绑定到当前组件实例上
unWatch() // 手动停止侦听器
unWatchEffect()
</script>

<template>
  <input ref="customName"/>
  <div v-for="n in 10" ref="itemRefs"></div>
  <!-- 也可绑定函数，函数第一个参数el为该组件的引用
  当元素卸载时函数也会被调用一次，此时el=null -->
  <div :ref="(el)={}"></div>
  <!-- 引用setup方式自定义的组件时，仅能访问到子组件通过defineExpose()暴露的属性方法 -->
  <!-- 引用选项式api定义的子组件时则，能获取到子组件的this -->
  <customComponent ref="customComponent"/>
</template>
<script setup>
import {ref, onMounted } from 'vue';
const customName = ref(null); // 定义同名的变量访问ref引用的组件
const itemRefs = ref([]); // 绑定v-for的对应变量为数组，数组并不保证与源数据相同顺序
onMounted(()=>{ // 仅在组件挂载后才能保证访问到模板引用
  customName.value.focus();
  console.log(itemRefs.value);
})
</script>

<!-- ButtonCounter.vue --> 
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>
<!-- 也可写作纯js文件(不推荐) -->
<script>
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
  // 或者 `template: '#my-template-element'`
}
</script>

<script setup> // 导入即可直接使用，使用setup()函数时则需要components选项注册
import ButtonCounter from './ButtonCounter.vue' // 此处为局部注册
</script>
<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />
</template>

<!-- MyComponent.vue -->
<script setup>
const props = defineProps({ // defineProps()宏无需引入即可使用
  title:String, // 基础类型检查，若指定null或undefined，则会跳过类型检查
  propA:[String, Number], // 多类型，Boolean类型存在特殊的类型转换
  propC:{
    type:String, // 可以是常见的原生构造函数，也可以是自定义的类型
    required:true, // 所有的prop默认都是可选的，定义required表明参数必传
    default:'默认值', // 未指定default的props默认值为undefined，Boolean类型则为false
    // default:(rowProps){return {message:''}} 
    // 若为Object或数组类型，则默认值必须从函数中返回
    validator(value){ return ['success', 'warning', 'danger'].includes(value)},
    // 自定义校验规则，函数返回值必须在上述数组中，校验失败在开发模式下会抛出控制台警告
  }
});
// 以对象的形式声明key为prop属性名称,value为其类型的构造函数
// 此处大写String表示字符串包装类构造函数，注意与ts中的小写类型string表示的类型区分开
console.log(props.title);
</script>

<!-- 没有使用setup的需要通过props选项来声明 -->
<script>
export default { // 两种实现方式都是基于props选项
  props: ['foo'], // 也可以以数组形式声明，但以对象形式带有校验效果因此更为推荐
  setup(props){console.log(props.foo)}
}
</script>
<!-- 父组件中 -->
<template>
 <MyComponent :title="reactiveTitle" v-bind="{foo:'解构传参'}"></MyComponent>
</template>

<template>
  <SingleRoot v-bind="$attrs"></SingleRoot>
  <!-- <Multi-Root1/> 多根节点时若不指定attrs则会警告
  <Multi-Root2/> -->
</template>
<script setup>
// setup中情况下无法指定inheritAttrs属性，需要额外的<script>标签指定配置
// 也就是说SFC中支持多<script>标签，但注意减少setup和setup()混用，更不能和选项式api混用
import { useAttrs } from 'vue';
const attrs = userAttrs(); // attrs总是反映为最新的透传，但不是响应式对象
</script>
<script>
export default { // 无setup时，attrs被暴露在上下文上
  setup(props, ctx){console.log(ctx.attrs)}
}
</script>

<template>
  <button @click="$emit('increaseBy', params)"></button>
</template>
<script setup>
// setup 下无法像模板中一样使用$emit触发事件，需要使用defineEmits声明后使用
const emit = defineEmits({ // 也支持Array<string> 的方式定义
  submit(payload){return true}, // 对象形式定义支持对触发事件的参数与进行验证
  (e:'change', id:numebr):void, // 配合ts可直接写成函数type的形式
});
// defineEmits只可在setup顶级作用域下使用
emit('submit');
</script>
<script>
export default { // setup()函数情况下则通过emits配置定义，与props类似
  emits:['inFocus', 'submit'],
  setup(props, ctx){ ctx.emit('submit')} // emit被暴露在上下文对象上
}
</script>

<script setup>
import { provide, inject, readonly } from 'vue'; // 推荐使用readonly包装provide的值
provide(key:string|Symbol, readonly(value:any)) // 给后代组件提供数据，可多次调用
// 注入父级组件provide的数据
const message = inject(ParentKey:string|Symbol, defaultValue)
// 在setup()中provide/inject都要要保证在同步代码中调用，对注入的数据推荐仅在提供方组件中进行修改
</script>

<template>
  <AsyncComp/>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
const AsyncComp = defineAsyncComponent(() => {
  // 此处可通过异步请求获取组件或import方式动态导入组件
  return import('./url/yourComponent.vue') // 需要返回Promise对象
}) // 异步组件也可以通过app.component()的方式全局注册
const SafeAsyncComp = defineAsyncComponent({ // 对象配置形式入参
  loader:()=>import('./Foo.vue'), // 加载函数
  loadingComponent: Loading, // 异步组件loading状态下只用Loading组件占位
  delay:200, // 展示组件前的延迟时间, 默认200ms
  errorComponent:ErrorComponent, // 加载失败后展示ErrorComponent
  timeout:3000 // 超时限制，超时后展示ErrorComponent，默认值为Infinity
})
</script>

<script setup>
import { useMouse } from './mouse.js'
// 保证在同步代码中调用组合式函数，以保证函数中的生命周期hook、计算属性等能绑定到正确的组件实例上
const { x, y } = useMouse()
</script>
<template>Mouse position is at: {{ x }}, {{ y }}</template>

<script setup lang='ts'>
import { ref, computed, reactive, computed, provide, inject } from 'vue';
import type { Ref, InjectionKey } from 'vue';
import CustomComponent from './CustomComponent.vue'

const props1 = defineProps({foo:{type:String, required:true}}); // 推导类型
const props2 = defineProps<{foo:string}>() // 通过泛型指定类型
interface Props { foo:string } // Props可以上从其他文件引入的类型引用，但不能是导入的类型
const props3 = defineProps<Props>() // 通过接口指定props类型
const props4 = withDefaults(defineProps<Props>(), {
  msg:'hello' // 通过withDefaults指定props默认值
})

const emit1 = defineEmits(['change']) // 运行时声明
const emit2 = defineEmits<{(e:'change', id:number):void}>() // 通过泛型声明类型

const year = ref(2020); // 推导为Ref<number>类型
const date:Ref<string | number> = ref('13'); // 引入Ref覆盖默认推导行为
// 若指定了泛型，但未给出初始值，则最后将是一个包含undefined的联合类型
const time = ref<string | number>('12') // 调用时指定泛型也可指定类型

// reactive的类型标注与ref大同小异
const book:{title:string} = reactive({title:"book"}) // 指定并推导类型

// computed也可从返回值中进行类型推导，也可以通过泛型指定类型
const double = computed<number>(()=>{ /* 泛型指定computed类型，若不符则会报错 */})

// 事件处理函数的入参event默认类型为any，若开启严格模式则ts会报错，可将其标注为Event类型，取值时配合断言使用
function handleChange(event:Event){console.log((event.target as HTMLInputElement).value)}

const key = Symbol() as InjectionKey<string>; // 定义provide数据类型
provide(key, 'foo') // 推荐将key类型放入单独的文件中共享
// 在后代组件中注入，注入类型将带有undefined的联合类型，因为无法保障父组件提供了该值，可通过默认值消除
const foo = inject<string>(key) // foo类型为 string|undefined

const el = ref<HTMLInputElement| null>(null); // 为模板引用标注类型
const modal = ref<InstanceType<typeof CustomComponent> | null>(null) // 自定义组件标注类型
</script>
<template>
  <input ref="el"/>
  <CustomComponent ref="modal"></CustomComponent>
</template>
<!-- 非setup下使用类型推导需要需要使用defineComponent函数包裹整个对象才可进行推导 -->

<template>
  <ul>
    <li v-for="{id,text} in items" :key="id">{{text}}</li>
  </ul>
</template>