一，vue3环境搭建
1.npm install -g @vue/cli 2.vue create name ? Please pick a preset: (Use arrow keys) //请选择预选项
Default ([Vue 2] babel, eslint) //使用Vue2默认模板进行创建 Default (Vue 3 Preview) ([Vue 3] babel, eslint) //使用Vue3默认模板进行创建 Manually select features //手动选择(自定义)的意思
二，ref，reactive使用
<template>
<div>
<h1>{{ num }}</h1>
<button @click="add">递增</button>
<h2>{{ objName.name }}今年{{ objName.age }}岁</h2>
<button @click="setAge">修改年龄</button>
</div>
</template>
<script setup>
import { ref , reactive ,isRef,} from "vue";
let money=ref(88);
let objName=reactive({
name:'张三',
age:12,
motion:[123,456,789]
});`
let add=()=>{
num.value++
}
const setMoney=computed(()=>{
const p=money.value+100
return p
})
console.log('isRef的使用',isRef(objName));
console.log('isRef的使用',isRef(num));
<script>
三：computed , watch, onBeforeMount, onMounted使用
<template>
<div class="home">
<h1>{{ num }}</h1>
<button @click="add">递增</button>
<h2>{{ objName.name }}今年{{ objName.age }}岁</h2>
<button @click="setAge">修改年龄</button>
<ul>
<li v-for="(item,i) in objName.motion" :key="i">{{ item }}</li>
</ul>
<h3>计算属性{{ setMoney }}</h3>
<ul>
<li v-for="(v,i) in arr" :key="i">{{ v }}</li>
</ul>
<ul>
<li v-for="(v,i) in arr1" :key="i">{{ v }}</li>
</ul>
------------------------------------------
</div>
</template>
<script setup>
import { ref , reactive ,isRef, computed , watch, onBeforeMount, onMounted,provide} from "vue";
let num=ref(0);
let money=ref(88);
let objName=reactive({
name:'张三',
age:12,
motion:[123,456,789]
});
let add=()=>{
num.value++
}
const setMoney=computed(()=>{
const p=money.value+100
return p
})
let setAge=()=>{
objName.age=38
}
watch(num,(newNum,oldNum)=>{
console.log('新值',newNum);
console.log('旧值',oldNum);
})
watch(()=>objName.age,(newNum,oldNum)=>{
console.log('新值',newNum);
console.log('旧值',oldNum);
})
onBeforeMount(()=>{
console.log('创建前');
})
onMounted(()=>{
console.log('创建后');
})
console.log('isRef的使用',isRef(objName));
console.log('isRef的使用',isRef(num));
</script>
四：父子组件传参 defineProps,defineEmits defineExpose provide/inject
父组件：HomeView.vue
<template>
<div class="home">
<ul>
<li v-for="(v,i) in arr" :key="i">{{ v }}</li>
</ul>
<ul>
<li v-for="(v,i) in arr1" :key="i">{{ v }}</li>
</ul>
------------------------------------------
<hello :num="num" @getVal="getVal" ref="testcomRef"/>
</div>
</template>
<script setup>
import { ref , reactive ,isRef, computed , watch, onBeforeMount, onMounted,provide} from "vue";
import hello from "../components/HelloWorld.vue";
//provide
const provideData=ref('provide的使用')
provide('provideData',provideData)
let num=ref(122);
let arr=ref([])
// const stop1 = watch([num], ([newNum],[oldNum]) => {
// console.log('num', newNum) // false
// console.log('usr', oldNum ) // true
// })
let arr1=ref()
let testcomRef=ref()
//获取子传的参数
let getVal=(value)=>{
console.log('子传过来的参数',value);
arr.value=value
arr1.value=testcomRef.value.data.list
console.log('子组件中定义的属性值',testcomRef.value.data);
}
</script>
//子组件HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h3>父传的参数 {{props.num }}</h3>
<ul>
<li v-for="(item,i) in data.list" :key="i">{{ item }}</li>
</ul>
<button @click="send" >子传父</button>
<h3>provide/inject：{{ injectData }}</h3>
</div>
</template>
<script setup>
import { ref ,defineProps,defineEmits,defineExpose,inject} from "vue";
//provide以及inject的使用
const injectData=inject('provideData','默认值')
let data=ref({
list:['掌声','蹲下']
})
let props=defineProps({
num:{
type:Number,
default:0
}
})
let emit=defineEmits(['getVal'])
let send=()=>{
let list1=[0,22,34,44]
emit('getVal', list1);
}
//父组件获取子组件中的属性值 需要使用defineExpose
defineExpose({data})
let msg=ref('这是子组件')
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
