Vue3程式設計流暢技巧使用setup語法糖拒絕寫return

<script setup>
//import引入的內容
import { getToday } from './utils'  
// 變數
const msg = 'Hello!'
// 函數
function log() {
  console.log(msg)
}
</script>
//在template中直接使用宣告的變數、函數以及import引入的內容
<template>
  <div @click="log">{{ msg }}</div>
   <p>{{getToday()}}</p>
</template>

<script>
//import引入的內容
import { getToday } from './utils'  
export default{
 setup(){
    // 變數
    const msg = 'Hello!'
    // 函數
    function log() {
      console.log(msg)
    }
    //想在tempate裡面使用需要在setup內return暴露出來
    return{
       msg,
       log,
       getToday 
    }
 }
}
</script>
<template>
  <div @click="log">{{ msg }}</div>
   <p>{{getToday()}}</p>
</template>

  <script>
  console.log('script');//多次範例元件,只觸發一次
  export default {
      setup() {
          console.log('setupFn');//每次範例化元件都觸發和script-setup標籤一樣
      }
  }
  </script>

<script setup>
import MyComponent from './MyComponent.vue'
//components:{MyComponent}  不需要註冊直接使用
</script>
<template>
  <MyComponent />
</template>

<template>
  <div>父元件</div>
  <Child :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const msg = ref('父的值')  //自動返回，在template直接解套使用
</script>

<template>
  <div>子元件</div>
  <div>父元件傳遞的值：{{title}}</div>
</template>
<script setup>
//import {defineProps} from 'vue'   不需要引入
//語法糖必須使用defineProps替代props
const  props = defineProps({
  title: {
    type: String
  }
});
//script-setup 需要通過props.xx獲取父元件傳遞過來的props
console.log(props.title) //父的值
</script>

<template>
  <div>子元件</div>
  <button @click="toEmits">子元件向外暴露資料</button>
</template>
<script setup>
import {ref} from 'vue'
const name = ref('我是子元件')
//1、暴露內部資料
const  emits = defineEmits(['childFn']);
const  toEmits = () => {
  //2、觸發父元件中暴露的childFn方法並攜帶資料
  emits('childFn',name)
}
</script>

<template>
  <div>父元件</div>
  <Child  @childFn='childFn' />
  <p>接收子元件傳遞的資料{{childData}} </p>
</template>
<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const childData = ref(null)    
const childFn=(e)=>{
    consloe.log('子元件觸發了父元件childFn，並傳遞了引數e')
    childData=e.value
}    
</script>

<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
//主動暴露元件屬性
defineExpose({
  a,
  b
})
</script>

<template>
  <div>父元件</div>
  <Child  ref='childRef' />
  <button @click='getChildData'>通過ref獲取子元件的屬性 </button>
</template>
<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const childRef= ref()  //註冊響應資料  
const getChildData =()=>{
  //子元件接收暴露出來得值
  console.log(childRef.value.a) //1
  console.log(childRef.value.b) //2  響應式資料
}    
</script>

<template>
  <Child msg="非porps傳值子元件用attrs接收" >
    <!-- 匿名插槽 -->
    <span >預設插槽</span>
    <!-- 具名插槽 -->
    <template #title>
      <h1>具名插槽</h1>
    </template>
    <!-- 作用域插槽 -->
    <template #footer="{ scope }">
      <footer>作用域插槽——姓名：{{ scope.name }}，年齡{{ scope.age }}</footer>
    </template>
  </Child>
</template>
<script setup>
// 引入子元件
import Child from './child.vue'
</script>

<template>
  <!-- 匿名插槽 -->
  <slot />
  <!-- 具名插槽 -->
  <slot name="title" />
  <!-- 作用域插槽 -->
  <slot name="footer" :scope="state" />
  <!-- $attrs 用來獲取父元件中非props的傳遞到子元件的引數 -->
  <p>{{ attrs.msg == $attrs.msg }}</p>
  <!--true  沒想到有啥作用... -->
  <p>{{ slots == $slots }}</p>
</template>
<script setup>
import { useSlots, useAttrs, reactive, toRef } from 'vue'
const state = reactive({
  name: '張三',
  age: '18'
})
const slots = useSlots()
console.log(slots.default()); //獲取到預設插槽的虛擬dom物件
console.log(slots.title());   //獲取到具名title插槽的虛擬dom物件
// console.log(slots.footer()); //報錯  不知道為啥有插槽作用域的無法獲取
//useAttrs() 用來獲取父元件傳遞的過來的屬性資料的（也就是非 props 的屬性值）。
const attrs = useAttrs()
</script>

<script lang='jsx'>
import { defineComponent, useSlots } from "vue";
export default defineComponent({
  setup() {
    // 獲取插槽資料
    const slots = useSlots();
    // 渲染元件
    return () => (
      <div>
        {slots.default?slots.default():''}
        {slots.title?slots.title():''}
      </div>
    );
  },
});
</script>

<script setup>
import { useRouter, useRoute } from 'vue-router'
    const route = useRoute()
    const router = useRouter()
    function pushWithQuery(query) {
      router.push({
        name: 'search',
        query: {
          ...route.query,
        },
      })
    }
  <script/>

import router from './router'
router.beforeEach((to,from,next)=>{
})

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
    // 與 beforeRouteLeave 相同，無法存取 `this`
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm(
        'Do you really want to leave? you have unsaved changes!'
      )
      // 取消導航並停留在同一頁面上
      if (!answer) return false
    })
    const userData = ref()
    // 與 beforeRouteUpdate 相同，無法存取 `this`
    onBeforeRouteUpdate(async (to, from) => {
      //僅當 id 更改時才獲取使用者，例如僅 query 或 hash 值已更改
      if (to.params.id !== from.params.id) {
        userData.value = await fetchUser(to.params.id)
      }
    })
 <script/>