vue3 setup

setup  

setup是一个新的组件选项，作为组件中使用组合API的起点。 
从组件生命周期来看，它的执行在组件实例创建之前vue2.x的beforeCreate执行。
这就意味着在setup函数中this 还不是组件实例，this此时是undefined
在模版中需要使用的数据和函数，需要在setup返回。
 

<template>
  <div class="container">
    <h1 @click="say()">{{msg}}</h1>
  </div>
</template>
<script>
export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
    // 定义数据和函数
    const msg = 'hi vue3'
    const say = () => {
      console.log(msg)
    }
 
    return { msg , say}
  },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)
  }
}
</script>

script setup 语法糖

<script setup></script>

生命周期

1.setup方法里面组件还没有完全挂载，需要用挂载的生命周期钩子函数

2.setup生命周期钩子函数没有beforeCreate和created

3.setup中生命周期钩子函数前面加on

4.onBeforeMount 挂载前

5.onBeforeUpdate 更新前

6.onBeforeUnmount 卸载前

7.onMounted 挂载完毕

8.onUpdated 更新完毕

9.onUnmount 卸载后

依赖注入

inject()

<script setup>
import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'
 
// 注入值的默认方式
const foo = inject('foo')
 
// 注入响应式的值
const count = inject('count')
 
// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)
 
// 注入一个值，若为空则使用提供的默认值
const bar = inject('foo', 'default value')
 
// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('foo', () => new Map())
 
// 注入时为了表明提供的默认值是个函数，需要传入第三个参数
const fn = inject('function', () => {}, false)
</script>

provide

提供一个值，可以被后代组件注入。

<script setup>
import { ref, provide } from 'vue'
import { fooSymbol } from './injectionSymbols'
 
// 提供静态值
provide('foo', 'bar')
 
// 提供响应式的值
const count = ref(0)
provide('count', count)
 
// 提供时将 Symbol 作为 key
provide(fooSymbol, count)
</script>

响应式核心

ref() 

接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性

// 导入ref响应数据
    import {ref} from 'vue'
 
// 定义num默认值是 5
    const num = ref(5);
    // 定义更新num的方法
    const setNum =(v)=>{
        num.value=v;
}

reactive() 

创建一个响应式对象：

const obj = reactive({ count: 0 })
obj.count++

computed()

接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 错误

watchEffect()

第一个参数就是要运行的副作用函数。这个副作用函数的参数也是一个函数，用来注册清理回调。清理回调会在该副作用下一次执行前被调用，可以用来清理无效的副作用，例如等待中的异步请求

第二个参数是一个可选的选项，可以用来调整副作用的刷新时机或调试副作用的依赖。

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> 输出 0

count.value++
// -> 输出 1

watch()

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

readonly()

接受一个对象 (不论

const original = reactive({ count: 0 })

const copy = readonly(original)

watchEffect(() => {
  // 用来做响应性追踪
  console.log(copy.count)
})

// 更改源属性会触发其依赖的侦听器
original.count++

// 更改该只读副本将会失败，并会得到一个警告
copy.count++ // warning!

是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理

全局创建

app.use(createPinia()).mount()

全局方法

app.config.globalProperties

一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。

app.config.globalProperties.$reverse = function(str){
       return str.split('').reverse().join('');
   }

组件相关

defineProps()   定义props

const props = defineProps({
  foo: String
})

defineEmits()   发送事件

const emits = defineEmits(["update:modelValue","clear"])

defineExpose()  

// 暴露一个clear方法让父组件可以通过ref调用
 defineExpose({
 clear
 })