Vue3.0源码学习尝鲜-“别再更新了，实在是学不动了”

<template>
  <div class="hello">
    <!-- <h1>简易demo</h1> -->
    <el-button type="primary" size='mini' @click="countReduce">-</el-button>
    <span>{{count}}</span>
    <el-button type="primary" size='mini' @click="countAdd">+</el-button>

    <br/>
    <br/>
    <inject />
  </div>
</template>

<script>
import { setup, reactive, computed, toRefs,onMounted, onUpdated, onUnmounted, provide, ref } from '@vue/composition-api'
import inject from './inject'
export default {
      name: 'HelloWorld',
      components: {
        inject
      },
      created () {
        console.log('初始化created',2);
      },
      mounted () {
        console.log('初始化mounted',3);
      },
      setup(props, context) {
        console.log('初始化setup',1);
        // 生命周期，setup 函数会在vue2.x的beforeCreate 之后、created 之前执行
        // props 中定义当前组件允许外界传递过来的参数名称, context相当于vue2.x中的this
        onMounted(()=>{
          console.log('初始化onMounted',4)
          console.log('<<<context',props,context) //在 setup() 函数中无法访问到 this，应该用context获取外部上下文数据
        })
        let state = reactive({
          // reactive就是定义data
          count: 0
          // double: computed(() => state.count * 2)
        })

        //方法
        let countReduce = ()=>{
          state.count--
        }
        let countAdd = ()=>{
          state.count++
        }
        const countData = ref(0);
        countData.value = state.count
        provide('sum', countData); //向子组件传值

        return {
          ...toRefs(state), //...为浅拷贝，会影响数据响应式，通过toRefs可变为响应式数据
          countReduce,
          countAdd
        }
      }
}
</script>

<style scoped>
span{
  padding:0 10px
}
</style>

let obj = {
    name: '唯品秀'
}
let o = new Proxy(obj, {
    get(target, key) {
        console.log('获取值', key)
        return Reflect.get(target, key)
    },
    set(target, key, val) {
        console.log('修改值', key)
        return Reflect.set(target, key, val)
    },
})
o.name = '百度'

// 运行结果
修改值 name

let obj = [0,1,2]

let o = new Proxy(obj, {
    get(target, key) {
        console.log('获取值', key)
        return Reflect.get(target, key)
    },
    set(target, key, val) {
        console.log('修改值', key)
        return Reflect.set(target, key, val)
    },
})

o.push(100)
console.log(o)

// 运行结果
获取值 push
获取值 length
修改值 3
修改值 length
Proxy {0: 0, 1: 1, 2: 2, 3: 100}

let obj = {name:'北京', location:{city:'上海'}}

let o = new Proxy(obj, {
    get(target, key) {
        console.log('获取值', key)
        return Reflect.get(target, key)
    },
    set(target, key, val) {
        console.log('修改值', key)
        return Reflect.set(target, key, val)
    },
})

o.location.city = '上海'

// 结果
获取值 location