setup
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue3]]
&color(red){※前提条件：本文基于 Vue 3.0 创作};
#contents
* 概要 [#hbab2692]
Vue3中的一个新的配置项，值为一个函数
setup 是所有 Composition API（组件API）“表演的舞台”
组件中所用到的：数据、方法等等、均要配置在 setup中。简述...
#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.val...
// 执行其他加载逻辑
});
// 监听路由参数变化
watch(() => route.params, (newParams, oldParams) => {
if (newParams.id !== id.value) {
id.value = newParams.id;
console.log('Route parameter changed to:', id.val...
// 执行相应的逻辑
}
});
return {
id
};
}
};
}}
* 注意点 [#hd295fbd]
- setup的执行时机：在beforeCreate 之前执行一次，this 是 u...
- setup 不能是一个 async函数：因为返回值不再是return的对...
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue3]]
&color(red){※前提条件：本文基于 Vue 3.0 创作};
#contents
* 概要 [#hbab2692]
Vue3中的一个新的配置项，值为一个函数
setup 是所有 Composition API（组件API）“表演的舞台”
组件中所用到的：数据、方法等等、均要配置在 setup中。简述...
#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.val...
// 执行其他加载逻辑
});
// 监听路由参数变化
watch(() => route.params, (newParams, oldParams) => {
if (newParams.id !== id.value) {
id.value = newParams.id;
console.log('Route parameter changed to:', id.val...
// 执行相应的逻辑
}
});
return {
id
};
}
};
}}
* 注意点 [#hd295fbd]
- setup的执行时机：在beforeCreate 之前执行一次，this 是 u...
- setup 不能是一个 async函数：因为返回值不再是return的对...
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
