vue3.X
信息源:Wscats/vue-cli
个人喜欢的前端博客:技术胖,包含多种前端前沿技术
脚手架搭建
npm install -g @vue/cli
vue create katsuki-test //进入配置选择,选3版本
根据选择的管理包运行
yarn serve
npm run serve
setup(props, ctx)
setup
对应生命周期beforeCreate
和created
接受的参数
props
:获取父组件等传入值或函数
ctx
包含的一些属性:
- root
- parent
- refs
- attrs
- listeners
- isServer
- ssrContext
- emit
setup做什么?
1.创建响应式数据:ref
和reactive
,非响应式,相当于state
2.定义函数
3.引入的方式调用生命周期
4.return
响应数据和函数,template
能调用
生命周期
setup
取缔了2.0
中beforeCreate
、created
生命周期
Vue2.0 | Vue3.0 |
---|---|
beforeCreate | setup |
created | setup |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeDestroy | onBeforeUnmount |
destroyed | onUnmounted |
errorCaptured | onErrorCaptured |
新增了onRenderTracked
、onRenderTriggered
使用案例
案例一:ref
<template>
<div>
<button @click="onChange">{{ name }} age: {{ age }}</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
// 第一个参数接收props
setup() {
// 响应式数据
let name = ref('katsuki')
let age = ref(17)
// 函数
const onChange = () => age.value ++
//必须返回 模板中才能使用
return {
name,
age,
onChange
}
}
}
</script>
案例二:emit、state
<template>
<input type="text" v-model="username" placeholder="Username" />
<input type="password" v-model="password" placeholder="Password" />
<button @click="login">假登录</button>
<p>Values: {{ lowerCaseUserName + ' ' + password }}</p>
</template>
<script>
// 引入需要使用的生命周期
import { reactive, computed, onMounted, toRefs } from 'vue'
export default {
emits: {
// 对应名称接收消息
login: obj => {
console.log('obj', obj)
return true
}
},
// 第二个参数接收emit
setup(props, { emit }) {
// 响应数据集合state
const state = reactive({
username: '',
password: '',
lowerCaseUserName: computed(() => state.username.toLowerCase()),
})
// 发送消息
const login = () => {
emit('login', {
username: state.username,
password: state.password,
})
}
onMounted(() => {
console.log('onMounted')
})
return {
...toRefs(state), // 解构转换为响应式框架
login,
}
}
}
</script>
案例三:watch
Watch.vue
<template>
<div>
<div class="input_warp">
<input type="text" v-model="inputValue" />
</div>
<div class="input_warp">
<input type="text" v-model="inputValue2" />
</div>
</div>
</template>
<script>
import { reactive, toRefs, watch } from 'vue'
export default {
setup() {
const state = reactive({
inputValue: '',
inputValue2: '',
})
// 监听单个值
watch(() => state.inputValue, (newinputValue, oldinputValue) => {
console.log('newinputValue', newinputValue)
console.log('oldinputValue', oldinputValue)
})
// 监听多个值
watch(
() => [state.inputValue, state.inputValue2],
([newinputValue, newinputValue2], [oldinputValue, oldinputValue2]) => {
console.log('newinputValue', newinputValue)
console.log('newinputValue2', newinputValue2)
console.log('oldinputValue', oldinputValue)
console.log('oldinputValue2', oldinputValue2)
}
)
return {
...toRefs(state),
}
},
}
</script>
<style lang="less">
.input_warp {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background-color: pink;
}
</style>
案例四:vuex
store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
inputValue: '',
inputValue2: '',
},
getters: {
getInputValue(state) {
return state.inputValue
},
getInputValue2(state) {
return state.inputValue2
},
},
mutations: {
setInputValue(state, value) {
state.inputValue = value
},
setInputValue2(state, value) {
state.inputValue2 = value
},
},
actions: {},
modules: {},
})
main.js
添加引入
import store from './store'
createApp(App)
.use(store)
Watch.vue
<template>
<div>
<div class="input_warp">
<input type="text" v-model="inputValue" />
</div>
<div class="input_warp">
<input type="text" v-model="inputValue2" />
</div>
</div>
</template>
<script>
import { reactive, toRefs, watch } from 'vue'
import { useStore } from 'vuex'
export default {
setup() {
const store = useStore()
const state = reactive({
inputValue: '',
inputValue2: '',
})
watch(
() => [state.inputValue, state.inputValue2],
([newinputValue, newinputValue2], [oldinputValue, oldinputValue2]) => {
// 奖数据存入store
store.commit('setInputValue', newinputValue)
store.commit('setInputValue2', newinputValue2)
// 开启了eslint则必须调用
console.log('oldinputValue', oldinputValue)
console.log('oldinputValue2', oldinputValue2)
}
)
return {
...toRefs(state),
}
},
}
</script>
<style lang="less">
.input_warp {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background-color: pink;
}
</style>
Panel.vue
<template>
<div class="about">
<Watch />
<h3>inputValue:<span v-text="inputValue"></span></h3>
<h3>inputValue2:<span v-text="inputValue2"></span></h3>
</div>
</template>
<script>
import Watch from '../components/Watch'
import { reactive, toRefs, computed } from 'vue'
import { useStore } from 'vuex'
export default {
components: {
Watch,
},
setup() {
const store = useStore()
// 获取store的值,赋值到当前state中
const state = reactive({
inputValue: computed(() => {
return store.getters.getInputValue
}),
inputValue2: computed(() => {
return store.getters.getInputValue2
}),
})
return {
...toRefs(state),
}
},
}
</script>
案例五:provide、inject
Father.vue
<template>
<div>
FatherPage
<Son />
</div>
</template>
<script>
import Son from '../components/son'
import { provide, reactive } from 'vue'
export default {
components: {
Son,
},
setup() {
const state = reactive({
name: 'katsuki',
arr: ['ォラォラォラォラ', '無駄無駄無駄', '貧弱貧弱貧弱', 'wryyyyyy', 'だが断る']
})
// 在父组件及其子组件中可获取
provide('katsuki', state.name)
provide('arr', state.arr)
},
}
</script>
Son.vue
<template>
<div>SonPage</div>
</template>
<script>
import { inject } from 'vue'
export default {
setup() {
const katsuki = inject('katsuki')
console.log('katsuki', katsuki)
const arr = inject('arr')
console.log('arr', arr)
},
}
</script>
案例六:hooks
在src
下创建hooks
文件夹,在该文件夹下创建useNowTime.js
useNowTime.js
import { ref } from "vue";
const nowTime = ref("00:00:00");
const getNowTime = () => {
const date = new Date();
const h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
const m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
const s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
nowTime.value = h + ":" + m + ":" + s;
setTimeout(getNowTime, 1000);
};
export { nowTime, getNowTime };
<template>
<div>{{ nowTime }}</div>
<div><button @click="getNowTime">显示时间</button></div>
</template>
<script>
import { nowTime, getNowTime } from "@/hooks/useNowTime";
export default {
setup() {
return {
nowTime,
getNowTime,
};
},
};
</script>
这样提取出来,就能在需要该功能的组件中引入,实现复用
案例七:获取元素dom(Vue2 Refs)
<template>
<div ref="katsukiDivRef">ref元素</div>
<el-table ref="elTbleRef"></el-table>
</template>
<script>
import { onMounted } from "vue";
import { ref } from "vue";
export default {
setup() {
const katsukiDivRef = ref();
const elTbleRef = ref();
onMounted(() => {
console.log(katsukiDivRef)
// element ui 调用函数
console.log(elTbleRef.value.clearSelection)
})
return {
katsukiDivRef,
elTbleRef
};
},
}
</script>