setup の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue3+setup へ行く。
• +Vue3+setup の差分を削除

#author("2024-11-26T21:37:57+08:00","default:Admin","Admin")
#author("2024-11-27T08:56:57+08:00","default:Admin","Admin")
[[Vue3]]

&color(red){※前提条件：本文基于 Vue 3.0 创作};
#contents


* 概要 [#hbab2692]

Vue3中的一个新的配置项，值为一个函数

setup 是所有 Composition API（组件API）“表演的舞台”

组件中所用到的：数据、方法等等、均要配置在 setup中。简述：像xue2中所有的钩子，属性，方法都放在里面

#codeprettify{{
/* 则对象中的属性，方法可在模板上直接使用 */
export default {
  name: 'App',
  // 下面只是测试setup，暂时不考虑响应式的问题
  setup(){
    // 数据
    let name = '张三'
    // 方法
    function sayHello(){
      alert(`我叫${name},我${age}岁了，你好啊！`)
    }// 返回一个对象
    return{ name, sayHello,}
  \}\}
}}

* vue3中实现页面onload（onMounted）和onshow [#ff10a8c5]

watch监听页面路径变化，前后相同即为onshow

#codeprettify{{
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
 
export default {
  setup() {
    const route = useRoute();
    const id = ref('');
 
    // 在组件加载时获取初始参数
    onMounted(() => {
      id.value = route.params.id;
      console.log('Component is mounted with id:', id.value);
      // 执行其他加载逻辑
    });
 
    // 监听路由参数变化
    watch(() => route.params, (newParams, oldParams) => {
      if (newParams.id !== id.value) {
        id.value = newParams.id;
        console.log('Route parameter changed to:', id.value);
        // 执行相应的逻辑
      }
    });
 
    return {
      id
    };
  }
};
}}

* 注意点 [#hd295fbd]

- setup的执行时机：在beforeCreate 之前执行一次，this 是 undefined，但在setup里面的函数中，this指向setup里面的所有属性或方法
- setup 不能是一个 async函数：因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合)

#hr();
コメント：
#comment_kcaptcha