一、安装
1.安装命令 npm install -g @vue/cli
2.使用vue-cli命令行创建项目
3.Vue3的新特性:
1.性能提升【打包小、内存占用小、渲染较快】
2.Componsition API使组件更易维护
3.teleport(瞬移组件)
4.兼容vue2语法
二、知识点
- 使用defineComponent 构建应用及绑定事件
- 通过import进行导入
import { defineComponent } from "vue"
defineComponent 可以省略
export default defineComponent ({
})
2.使用setup(props,content)父子通信
相当于vue2中的钩子函数 beforeCreate、created,初始化data,methods
在根组件中的components中定义组件,组件的名称建议首字母大写,用法跟vue2中的差不多
import 组件名 from "@/components/组件名"
export default defineComponent ({
components:{组件名},
})
组件通信
父传子:在父组件的子组件的标签上定义自定义属性,子组件中通过props来接收
setup函数接收props作为其第一个参数,props对象是响应式的(单向的父—>子),watchEffect或watch会观察和响应props的更新。不要对props对象进行解构,那样会失去响应性。在开发过程中,props对象对用户空间代码时不可变的,用户尝试修改props时会触发警告。
案例1:props作为setup的第一个参数
// 父组件 Home.vue
<template>
<div class="home">
<About :name="sendData"/>
</div>
</template>
<script>
import {ref} from 'vue';
import About from './About'
export default{
components:{
About,
},
setup(){
const sendData = ref('这世界很酷');
return {
sendData
}
}
}
</script>
// 子组件About.vue
<template>
<div class="about">
{{propContent}}
</div>
</template>
<script>
import {watchEffect} from 'vue';
export default{
props:{
name:String
},
setup(props){
let propContent= props.name;
// watchEffect(()=>{
// propContent = props.name
//})
return {
propContent
}
}
}
</script>
子传父:在子组件中绑定事件,但是我们无法使用this.$emit来接收数据,我们可以通过在setup中传入第二个参数content,通过content.emit("自定义事件名",参数)来实现
setup(props,content)第二个参数Context上下文对象
<template>
子传父
<div>
<button @click="sendF">点击传给父</button>
</div>
</template>
<script>
import {defineComponent, reactive, toRefs} from 'vue'
export default defineComponent({
name: '',
props: {
},
components: {
},
setup(props,content){
let sendF=()=>{
// 在setup中是无法使用this的
content.emit("save","改变")
}
return{
sendF
}
}
})
</script>
在父组件中绑定事件接收传来的参数
let save=(arg)=>{
console.log(arg,"123");
}
3.使用 ref、toRefs 绑定数据
ref 参数可以随意传递数据 具有响应式,用于为数据添加响应式状态
获取数据值得时候需要加value,中途产生的数据使用ref(响应式)
let str = ref ("数据")
str.value()
<template>
<div>
<p>使用v-model双向数据绑定的数据内容是:{{ msg }}</p>
<p>
<!-- 自己实现双向数据绑定,监听input事件,动态修改nmsg的值 -->
<input type="text" ref="myInput" @input="input" :value="nmsg" />
</p>
<p>使用@input事件动态实现双向数据绑定的数据内容是:{{ nmsg }}</p>
<p>
<!-- 使用ref方法动态定义并双向绑定hmsg -->
<input type="text" v-model="hmsg" @input="hmagInpu" />
</p>
<p>使用ref方法动态定义并双向数据绑定的数据hmsg是:{{ hmsg }}</p>
<p>toRefs 来实现在模板中不需要追加 state 调用数据:{{ msg }}</p>
</div>
</template>
<script>
import {
defineComponent,
reactive,
getCurrentInstance,
toRefs,
ref,
computed,
} from "vue";
export default defineComponent({
setup() {
const state = reactive({
msg: "",
nmsg: "",
cmsg: computed(() => {
// 1.计算属性
return state.msg.length;
}),
});
// 2.可以使用getCurrentInstance hook 来拿到当前实例化对象上下文信息,但是除非极其特殊的情况,否则不建议这样使用
const { ctx } = getCurrentInstance();
const input = () => {
// 在vue3中,因为是面向hooks函数编程,所以,无法通过this拿到当前vue实例化对象
console.log(ctx.$refs.myInput.value); // 像使用vue2中的this一样,使用ctx(上下文内容信息)
state.nmsg = ctx.$refs.myInput.value;
};
// 3.使用ref方法来定义一个响应式监听的对象,在实际开发中我们都是用这种方法来构建响应式对象
const hmsg = ref("abc");
const hmagInpu = () => {
// 在内部使用hmsg的值,需要使用value来获取对应的值
console.log("获取到的hmsg值是:" + hmsg.value);
};
return {
// 4.使用toRefs hook方法方便,访问msg不需要使用state.msg,直接msg就可以获取到
...toRefs(state),
hmsg,
input,
hmagInpu,
};
},
});
</script>
reactive 具有响应式,初始化数据定义在reactive中,通过return就能被调用
4.监听
先进行导入watch,watch中的第一个参数是监听的数据,参数二是回调
// 4.watch监听
// 4.1简单版的 // watch监听只能是 getter/effect 函数、ref、reactive对象或数组
// watch(state,()=>{
// console.log("01-msg新值"+state.msg_text);
// })
// 4.2监听指定的信息
// watch(()=>state.msg_text,(newV,oldV)=>{console.log("01-msg新值是"+newV+"---------旧值是"+oldV)})
// 4.3监听多个属性(数组形式)
// watch([() => state.msg_text, () => state.msg2_text], (newVal, oldVal) => {
// console.log("02-msg的新值是:" + newVal[1] + "-------旧值是:" + oldVal[1]); // 02-msg的新值是:
// })
// watchEffect 数据发生改变就能触发,程序运行时,初始化就会执行一次;参数中不需要指定监听的属性
watchEffect(()=>{
console.log(state.msg_text,"watchEffect");
})