vue3 语法测试

Home.vue

<template>
  <div class="home">
    <div>
      {{ fone }}
    </div>


    <div>
      {{ ftwo }}
    </div>

    <div>
      {{ ffour }}
    </div>

    <div>
      {{ ffive }}
    </div>
    <HelloWorld @toFatherThing="getChildThing" msg="Welcome to Your Vue.js + TypeScript App" v-model="fsix" />
    <div>
      {{ fsix }}
    </div>


    <div>
      {{ fseven }}
    </div>


    <div>
      <ul>
        <li v-for="item in feight">{{ item.name }}</li>
      </ul>
    </div>

    <div>{{ ften }}</div>


    <div>{{ aOne }}</div>
    <div>{{ aTwo }}</div>
    
    <!-- 成功渲染render子组件 -->
    <MyRender msg="msg" msg2="msg2"/>
  </div>
</template>

<script lang="ts" setup>
import HelloWorld from "../components/HelloWorld"
import MyRender from "../components/myRender"
import { onUpdated, onMounted, onBeforeUnmount, onUnmounted, onBeforeMount, computed, watchEffect, watch, ref, unref, reactive, shallowRef, shallowReactive, defineComponent, defineOptions, toRefs } from "vue"

import {myAbcHook} from "./homeHook"

//定义组件的一些配置
defineOptions({
  name: 'Home'
})

//ref 定义基本数据类型
const foneRef = ref('slkfjsklfdjskfd')

const fone = unref(foneRef) //获取ref的value

const ftwo = reactive({
  a: {
    b: {
      c: 'sdlfjslfkjsdf'
    }
  },
  a2: "sldfkjsklfjslkfj"
})

setTimeout(() => {
  ftwo.a.b.c = "3424234242342423"
  // ftwo.a2="slkfjlskdjflksfd"
}, 1000);

// watchEffect(()=>{
//    console.log(ftwo.a2,"ftwo-effect")  
// })

// watchEffect(()=>{
//    console.log(ftwo,"ftwo-ccc-effect")  
// })

watchEffect(() => {
  console.log(ftwo.a.b.c, "ftwo-abc-effect")  //可以监听到，说明watchEffect实现了深度监听
})


let fthree = toRefs(ftwo)

console.log(ftwo, "ftwo") //proxy 代理对象
console.log(fthree, "fthree") //返回一个对象，使用对象属性都通过ref实现监听


const ffourSref = shallowRef({
  a: {
    b: {
      c: 'sdkflsjdflkjsfd'
    }
  },
  a2: "before"
})

let ffour = unref(ffourSref)

setTimeout(() => {
  ffour.a.b.c = "changed"  //页面渲染没变，说明shallowRef不是深度监听

  ffour.a2 = "now" //也无法改变说明shallowRef只能监听基本的数据类型

}, 1000)


let ffive = shallowReactive({ //浅监听，只对第一层的引用类型进行监听
  a: {
    b: {
      c: "sdfkjsldsfjsdf"
    }
  },
  a2: "slkfjslksdf"
})

setTimeout(() => {
  ffive.a.b.c = "cccccc"//无法改变，说明shallowReactive 只能监听到直接的引用类型第一层
  // ffive.a2="now"
}, 1000)


let fsix = ref<string>()


function getChildThing(val) {
  console.log(val, "val") //获取子组件事件传过来的值
}


let feight = reactive([{
  id: 0,
  name: 'sfksjdf'
}, {
  id: 1,
  name: 'neuvodsksf'
}, {
  id: 2,
  b: {
    c: {
      d: 2342342
    }
  }
}])

setTimeout(() => {
  // feight[1].name="now"
  feight[2].b.c.d = 4056805468049
}, 1000)

watchEffect(() => {
  console.log(feight, "feight_sdfklsjdflsf") //上面的更改也监听到了，说明watchEffect 对数组也是深度监听
})

watch(feight, () => {
  console.log(feight, "feight")
})

let wone = ref('ksjldfkjsfd')

setTimeout(() => {
  wone.value = "34234242"
}, 1000)

watch(wone, (value, old) => {
  console.log(value, "wone") //直接获取到值
})

watchEffect(() => {
  console.log(wone, "effect")
  console.log(wone.value, "effect") //这样才能打印出来，这样才能监听到
})

let cone = computed(() => {
  return wone.value
})

console.log(cone, "cone")
console.log(cone.value, "cone_value") //类似ref需要通过value访问


onBeforeMount(() => {
  console.log('onBeforeMount')
})
onMounted(() => {
  console.log('onMounted')
})
onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
})
onUnmounted(() => {
  console.log('onUnmounted')
})

let ften = ref(11111)
onUpdated(() => {
  console.log("onUpdated") //在数据都更新到dom之后才执行,说明是异步的任务
})

setTimeout(() => {
  ften.value = 2222   //这里修改后，dom执行完成后会再次触发onUpdated
}, 3000)


//测试自定义hooks使用,自定义hook类似utils功能，都是hook可以通用组件的钩子和生命周期等
let {aOne,aTwo}=myAbcHook(9999)


</script>

<style lang="scss">
.home {
  width: 50vw;
  position: relative;
  margin: 0 auto;
}
</style>

子组件Helloworld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>


    <div>
      <input type="text" v-model="model">
    </div>

    <div>
      <button @click="fn1">child btn</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, unref, reactive, shallowRef, shallowReactive, defineComponent, defineOptions, toRefs, defineEmits, defineModel } from "vue"


defineProps<{
  msg: string,
  value: string
}>()

const model = defineModel() //vue3 vmodel实现方式


const emit = defineEmits(['toFatherThing']) //emit 实现


let val = 0
function fn1() {
  emit('toFatherThing', val++)
}



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

子组件myRender.tsx 写法尝试

import { h, defineComponent } from "vue";
export default defineComponent({
  name: "MyRender",
  props: {
    msg: {
      type: String,
      default: "这是子组件render",
    },
  },
  setup(props, context) {
    const { msg } = props;

    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs);

    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots);

    // 触发事件（函数，等价于 $emit）
    console.log(context.emit);

    // 暴露公共属性（函数）
    console.log(context.expose);

    console.log(context, "context");
    console.log(context.attrs, "attrs"); //可以获取到组件标签的属性值，但是如果被props读取后，这个属性值就不会在attrs里面了，attrs是一个对象
    console.log(context.attrs.msg2, "msg2"); //可以打印到msg2这个属性值

    return {
      msg,
    };
  },
  render() {
    console.log(this.$props.msg, "props_msg"); //这里可以直接通过this访问到props slots
    return [h("div", this.msg)];
  },
});