<template>
<test :count="count" @add="add"></test>
</template>
<script>
import { ref, isRef } from "vue";
import Test from "./components/Test.vue";
export default {
name: "#App",
//disc:你好,
},
setup() {
name: "陈尼克",
disc: "你好"
}
return {
name,
disc,
};
console.log(count)
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
再错
<template>
{{ text }}
</template>
<script>
import { ref, isRef, computed } from "vue";
import Test from "./components/Test.vue";
export default {
name: "App",
}
setup() {
const App = reactive({ //为什么这里App是state
name: "陈尼克",
desc: "你好",
});
const text = computed(() => {
console.log("11");
return state.name +state.desc;
});
setTimeout(() => {
name: {
李尼克
},2000),
})
return {
text,
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
正确的代码
<template>
{{ text }}
</template>
<script>
import { reactive, computed } from "vue";
export default {
name: "App",
setup() {
const state = reactive({ //为什么这里App是state
name: "陈尼克",
desc: "你好",
});
const text = computed(() => {
console.log("11");
return state.name +state.desc;
});
setTimeout(() => {
state.name = 李尼克;
},2000);
return {
text,
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
怎么没有改成李尼克你好呢?
<template>
{{ text }}
</template>
<script>
import { reactive, computed } from "vue";
export default {
name: "App",
setup() {
const state = reactive({ //为什么这里App是state
name: "陈尼克",
desc: "你好",
});
const text = computed(() => {
console.log("11");
return state.name + state.desc;
});
setTimeout(() => {
state.name = 李尼克;
},1000);
return {
text,
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
忘记打引号了
<template>
<p>{{ text }}</p>
</template>
<script>
import { reactive, computed } from "vue";
export default {
name: "App",
setup() {
const state = reactive({ //为什么这里App是state
name: "陈尼克",
desc: "你好",
});
const text = computed(() => {
console.log("11");
return state.name + state.desc;
});
setTimeout(() => {
state.name = "李尼克";
},2000);
return {
text,
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
再加一个
这里的state是一个内置的,还是自己写的变量
<template>
<p>{{ text }}</p>
</template>
<script>
import { reactive, computed } from "vue";
export default {
name: "App",
setup() {
const state = reactive({ //为什么这里App是state
name: "陈尼克",
desc: "你好",
});
const text = computed(() => {
console.log("11");
return state.name + state.desc;
});
setTimeout(() => {
state.name = "李尼克";
state.desc = "你好吗";
},2000);
return {
text,
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>