构建项目
vue-cli需要4.5
npm init vite-app <project-name>
vue3.0中文文档
vue文档，已经能看到vue3.0的东西了
写文章时的代码
<template>
<h1>{{ msg }}
</h1>
<button @click="numAdd">count is: {{ num }}
</button>
<button @click="changeAge">age is: {{ obj.age }}
</button>
<p ref="hello">Edit
<code>components/HelloWorld.vue
</code> to test hot module replacement.
</p>
<piTest></piTest>
<button @click="changeProvide1">changeProvide1
</button>
<button @click="changeProvide2">changeProvide2
</button>
</template>
<script>
import {
onMounted,
onUpdated,
reactive,
ref,
watch,
computed,
provide,
} from "vue";
import piTest from "../components/piTest.vue";
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
count: 0,
};
},
components: {
piTest,
},
setup(props, context) {
console.log(props);
console.log(context);
const name = ref("rmq");
const like = reactive({ dog: "wangwang", cat: "maomao" });
const provide1 = provide("name", name);
const provide2 = provide("like", like);
const changeProvide1 = () => {
name.value = "xr";
};
const changeProvide2 = () => {
like.dog = "ww";
like.cat = "mm";
};
const num = ref(0);
const numAdd = () => {
num.value++;
};
watch(
() => num.value,
(newNum, oldNum) => {
console.log("newNum:" + newNum);
console.log("oldNum:" + oldNum);
}
);
const obj = reactive({ name: "rmq", age: 22 });
const changeAge = () => {
obj.age++;
};
watch(
() => obj.age,
(newAge, oldAge) => {
console.log("newAge:" + newAge);
console.log("oldAge:" + oldAge);
}
);
const doubleCount = computed(() => num.value * 2);
const hello = ref("hello");
onMounted(() => {
hello.value.style.color = "pink";
});
return {
num,
numAdd,
changeAge,
obj,
doubleCount,
hello,
changeProvide1,
changeProvide2,
};
},
};
</script>
关于watch监听
监听简单的数据
const num
= ref(0);
const numAdd = () => {
num
.value
++;
};
watch(
() => num
.value
,
(newNum
, oldNum
) => {
console
.log(newNum
);
console
.log(oldNum
);
}
);
监听复杂一点的
const obj
= reactive({ name
: "rmq", age
: 22 });
const changeAge = () => {
obj
.age
++;
};
watch(
() => obj
.age
,
(newAge
, oldAge
) => {
console
.log("newAge:" + newAge
);
console
.log("oldAge:" + oldAge
);
}
);
监听多个
const num
= ref(0);
const numAdd = () => {
num
.value
++;
};
const obj
= reactive({ name
: "rmq", age
: 22 });
const changeAge = () => {
obj
.age
++;
};
watch([num
, () => obj
.age
], ([newNum
, newAge
], [oldNum
, oldAge
]) => {
console
.log(newNum
);
console
.log(oldNum
);
console
.log(newAge
);
console
.log(oldAge
);
});
ref获取Dom
vue3.0的获取DOM和之前有点不同
setup中先声明return出去DOM中ref去引用
const hello
= ref("hello");
onMounted(() => {
hello
.value
.style
.color
= "pink";
});
return {
hello
,
};
setup()的参数props和context
setup(props
, context
) {
console
.log(props
);
console
.log(context
);
}
生命周期
选项 APIHook inside inside setup
beforeCreateNot needed*createdNot needed*beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmountederrorCapturedonErrorCapturedrenderTrackedonRenderTrackedrenderTriggeredonRenderTriggered
提供和注入
用provide，api声明
import {
onMounted
,
onUpdated
,
reactive
,
ref
,
watch
,
computed
,
provide
,
} from "vue";
setup(){
const provide1
= provide("name", "rmq");
const provide2
= provide("like", { dog
: "wangwang", cat
: "maomao" });
}
用inject，api使用
<template>
<h2>piTest
</h2>
<div>{{inject1}}
</div>
<div>{{inject2}}
</div>
</template>
<script>
import { inject } from "vue";
export default {
setup() {
const inject1 = inject("name");
const inject2 = inject("like");
return {
inject1,
inject2,
};
},
};
</script>
<style>
</style>
也可以声明响应式的
const name
= ref("rmq");
const like
= reactive({ dog
: "wangwang", cat
: "maomao" });
const provide1
= provide("name", name
);
const provide2
= provide("like", like
);
const changeProvide1 = () => {
name
.value
= "xr";
};
const changeProvide2 = () => {
like
.dog
= "ww";
like
.cat
= "mm";
};
