VUE3 setup学习记录

<script lang="ts">
import {watchEffect, readonly, h, ref, defineComponent, toRefs, onMounted, watch,computed,reactive  } from "vue";
import classes from "*.module.css";
export default defineComponent({
  name: "HelloWorld",
  data(){
    return {
      name:'gaoliang'
    }
  },
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  mounted(){
    console.log('helloWorld mounted')
  },
  // setup组合式 API 接收俩参数，props，context上下文环境，类似于this,在setup里是不能使用this的
  setup(props,context){
    /*获取props里的参数，使用toRefs,在使用前要在import中将期解构引入
     在return中将msg返回，才能在模板中使用msg
      let { msg } = toRefs(props);
      return {msg} 
      上述代码在模板中可以直接使用{{msg}}
      但如果是 return {nest:{msg:msg}} 
      在模板中要这样使用{{nest.msg.value}}
      官方是这样描述的这句话“
        当 ref 作为渲染上下文 (从 setup() 中返回的对象) 上的 property 
        返回并可以在模板中被访问时，
        它将自动浅层次解包内部值。只有访问嵌套的 ref 时需要在模板中添加 ”
    */
    /**
     * ref的使用
     * 
      const root2 = ref(null)
      onMounted(function(){
        //setup里的onMounted要比mounted(){}执行的要早
       root2.value.innerHTML = 'root2' 
      })
      return {root2}
     */
    /**
     * reactive的使用，他与ref的主要区别就是ref用于基础类型数据，
     * reactive用于复杂数据，对象，数组
     * 在setup中取值也有所不同，ref创建的响应式值需要.value，而reactive创建的
     * 响应式应用可以直接取属性
     *  const o = reactive({name:'gaoliang'})
     * console.log(o.name)
     * consg age = ref(10)
     * console.log(age.value)
     */
    /**
     * computed计算函数的使用，在使用时，也需要先引入,返回
     *   const aaa = computed(() => {return 100})
     * return {aaa} 
     */
    /**
     * watch的使用 在使用时，也需要先引入
     * watch(counter,(n,o)=>{
        console.log(`counter由${o}变成了${n}`)
      })
     */
    /**
     * watchEffect 的使用 在使用时，也需要先引入
     * 在回调函数中，依赖发生了改变，就会执行watchEffect 的回调函数
     * 而且经测试，对象属生变化，数组元素变化，watchEffect都可以检查得到 
     * watchEffect(() => {
      console.log('vvvvvvvvvvvvvvvvvvvvvv', counter.value)
      console.log('vvvvvvvvvvvvvvvvvvvvvv', o.name)
    })
     */
    /**
     * context参数的使用
     * context 是一个普通的 JavaScript 对象，它暴露组件的三个 property：
     *  // Attribute (非响应式对象)
          console.log(context.attrs)

          // 插槽 (非响应式对象) context.slots.default()
          console.log(context.slots)

          // 触发事件 (方法) 同vue2中的this.$emit同样的用法 context.emit('cli','hahahahah')
          console.log(context.emit)
     */
      
  }
});
</script>