vue3-setup语法糖

官网上setup语法糖相关用法示例给的不全

生命周期

<script setup>
    // mounted
    onMounted(() => {
    	console.log('Component is mounted!')
    })
</script>

获取dom

<template>
	<div ref="home"></div>
</template>
<script setup>
    import { ref, onMounted } from 'vue'
    const home = ref(null)
    onMounted(() => {
        console.log(home.value)
    })
</script>

computed

<template>
	{{msg}}
</template>
<script setup>
    import { computed } from 'vue'
    const msg = computed(() => {
        return 'hello, world'
    })
    console.log(msg.value)
</script>

watch

• 监听原始数据类型

<template>
	{{count1}} {{count2}}
	<button @click="plusOne">加一</button>
</template>
<script setup>
    import { ref, watch } from 'vue'
    const count1 = ref(0)
    const count2 = ref(0)
    watch(count1, (newVal, old) => {
        console.log(newVal)
    })
    watch(count2, (newVal, old) => {
        console.log(newVal)
    })
    function plusOne() {
        count1.value ++
        count1.value ++
    }
</script>

• 监听数组或对象

<template>
	<button @click="btnClick">点击</button>
</template>
<script setup>
    import { reactive, watch } from 'vue'
    const arr = reactive([1,2,3])
    const obj = reactive({name: 'paul'})
    watch(() => [...arr], (newVal, old) => {
        console.log(newVal)
    })
    watch(() => obj, (newVal, old) => {
        console.log(newVal)
    }, { deep: true })
    function btnClick() {
        arr.push(4)
        obj.age = 20
    }
</script>

• 监听vuex

<script setup>
    import { watch, useStore } from 'vue'
    const store = useStore()
    watch(() => store.state.count, (newVal, old) => {
        console.log(newVal)
    })
</script>

组件传值

props/emit

• 父组件father.vue

  <template>
  	{{count}}
  	<Son :count="count" @plus="plusOne" />
  </template>
  <script setup>
      import { ref, watch } from 'vue'
      import Son from 'son.vue'
      const count = ref(0)
      function plusOne() {
          count.value ++
      }
  </script>
  

• 子组件son.vue

  <template>
  	{{count}}
  	<button @click="plusOne">加一</button>
  </template>
  <script setup>
      const props = defineProps({
          count: Number
      })
      const emits = defineEmits(['plus'])
      function plusOne() {
          emits('plus')
      }
  </script>
  

v-model

• 父组件

	<template>
    	<h2>父组件：{{count}}</h2>
    	<Son v-model:count="count" />
    </template>
    <script setup>
        import { ref } from 'vue'
        import Son from 'son.vue'
        const count = ref(0)
    </script>

-子组件

	<template>
    	<h2>子组件：{{count}}</h2>
    	<button @click="plusOne">加一</button>
    </template>
    <script setup>
        import {  defineProps, defineEmits } from 'vue'
        const props = defineProps(['count'])
        const emits = defineEmits(['update:count'])
        function plusOne() {
            emits('update:count', props.count + 1)
        }
    </script>

provide/inject

可以看做是加强版的props，父组件有一个 provide 选项来提供数据，所有的子组件都可以通过inject获取这些数据，父组件不需要知道哪些子组件使用它provide的数据。

provide(属性名，值)//属性名是字符串类型

inject(属性名，默认值)

注意点：

1. provide也可以传递普通数据，但是传递ref或reactive定义的数据才具有响应性
2. 不同于props，provide是双向数据流，即可以在子组件里修改父组件传递过来的值
3. 如果不想让子组件修改父组件传递的值，使用readonly，下面有示例

• 父组件father.vue

  <template>
    <div class="father" >
      <About />
      <button @click="plusOne">加一</button>
    </div>
  </template>
  <script setup>
  import About from '../about/index.vue'
  import { ref, provide } from 'vue'
  const count = ref(1)
  provide('count', count)
  function plusOne() {
    count.value++
  }
  </script>
  

• 子组件son.vue

  <template>
    <div class="son">
      <h1>从父组件拿的值：{{count}}</h1>
    </div>
  </template>
  
  <script setup>
  import { inject } from 'vue'
  const count = inject('count')
  </script>
  

• 孙子组件grandChild.vue

  <template>
    从爷爷组件获取的值：{{count}}
  </template>
  <script setup>
  import { inject } from 'vue'
  const count  = inject('count')
  </script>
  

• readonly

  //父组件中
  <script setup>
  import { ref, readonly，provide } from 'vue'
  const count = ref(0)
  provide('count', readonly(count))
  </script>
  

路由

<script setup>
    import { useRoute, useRouter } from 'vue-router'
	const route = useRoute()// 相当于vue2里面的this.$route
	const router = useRouter()// 相当于vue2里面的this.$router
</script>