vue3技术简易入门剖析（三）

<template>
  <h1>App.vue组件</h1>
  <h3>{{age}}</h3><button @click="age+=1">点我</button>
</template>
<script>
    //首先导入需要使用生命周期钩子函数
  import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
  export default {
    name: 'App',
    components: {},
    setup(){
      let age = ref(18)
      console.log('================beforeCreate======================')
      console.log('================created======================')
      onBeforeMount(()=>{
        console.log('================onBeforeMount======================')
      })
      onMounted(()=>{
        console.log('================onMounted======================')
      })
      onBeforeUpdate(()=>{
        console.log('================onBeforeUpdate======================')
      })
      onUpdated(()=>{
        console.log('================onUpdated======================')
      })
            //当组件进行切换时 可以调用卸载钩子函数
      onBeforeUnmount(()=>{
        console.log('================onBeforeUnmount======================')
      })
      onUnmounted(()=>{
        console.log('================onUnmounted======================')
      })
      return {age}
    }
  }
</script>

const obj = reactive({ count: 0 })

const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2
  }
})
// 改变 state 本身的性质是响应式的
state.foo++
// ...但是不转换嵌套对象
isReactive(state.nested) // false
state.nested.bar++ // 非响应式

const original = reactive({ count: 0 })
const copy = readonly(original)
watchEffect(() => {
  // 用于响应性追踪
  console.log(copy.count)
})
// 变更 original 会触发依赖于副本的侦听器
original.count++
// 变更副本将失败并导致警告
copy.count++ // 警告!

const state = shallowReadonly({
  foo: 1,
  nested: {
    bar: 2
  }
})
// 改变 state 本身的 property 将失败
state.foo++
// ...但适用于嵌套对象
isReadonly(state.nested) // false
state.nested.bar++ // 适用

<script>
  import {reactive,ref,toRef,toRefs,shallowReadonly,readonly} from 'vue'
  export default{
    name:"Father",
    components:{Son},
    setup(){
      let fname = ref('父亲')
      let person = reactive({
        name:'张三',
        age:18,
        job:{
          salary:20
        }
      })
            //把person对象重新使用shallowReadonly包括 重新赋值给person
      person = shallowReadonly(person)
      return {
        ...toRefs(person)
      }
    }
  }
</script>

import { reactive, isReactive } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: 'John'
    })
    console.log(isReactive(state)) // -> true
  }
}

const foo = {}
const reactiveFoo = reactive(foo)
console.log(toRaw(reactiveFoo) === foo) // true

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false
// 嵌套在其他响应式对象中时也可以使用
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1

const state = reactive({
  foo: 1,
  bar: 2
})
const fooRef = toRef(state, 'foo')
fooRef.value++
console.log(state.foo) // 2
state.foo++
console.log(fooRef.value) // 3

export default{
    name:"Father",
    setup(){
      let fname = ref('父亲')
      let person = reactive({
        name:'张三',
        age:18
      })
      return {
        name:toRef(person,'name')
      }
    }
  }

export default{
    name:"Father",
    setup(){
      let fname = ref('父亲')
      let person = reactive({
        name:'张三',
        age:18
      })
      return {
        ...toRefs(person)
      }
    }
  }
可以直接把整个person对象中所有的数据都变成 toRef形式 使用的时候 直接使用person对象的属性名就可以了。

全局挂载
app.config.globalProperties.foo = 'bar'

我们可以把对象中的常用数据通过toRef引用出来，这样就不需要再把整个对象向外返回了，写法上会简单些。
```js
export default{
    name:"Father",
    setup(){
      let fname = ref('父亲')
      let person = reactive({
        name:'张三',
        age:18
      })
      return {
        name:toRef(person,'name')
      }
    }
  }
我们可以通过toRef把一个响应式对象中的单个数据向外暴漏  并且这个单个数据 不会丢失对person对象的响应性。

export default{
    name:"Father",
    setup(){
      let fname = ref('父亲')
      let person = reactive({
        name:'张三',
        age:18
      })
      return {
        ...toRefs(person)
      }
    }
  }
可以直接把整个person对象中所有的数据都变成 toRef形式 使用的时候 直接使用person对象的属性名就可以了。

全局挂载
app.config.globalProperties.foo = 'bar'