-
vue是什么?
渐进式的javascript框架,用于构建用户界面的javascript框架。
-
Vue的核心功能:声明式渲染(template)和响应性
-
使用vue的方式:
-
无需构建步骤,渐进式增强静态的HTML
-
在任何页面中作为Web Components嵌入
-
单页面应用SPA
-
全栈/服务端渲染(SSR)
-
Jamstack/静态站点生成(SSG)
-
开发桌面端、移动端、WebGl,甚至是命令行终端中的界面
-
Vue3项目的创建:
安装脚手架: npm install -g @vue/cli
创建项目:vue create appName
-
vue组件风格分为选项式API和组合式API(选项式API是基于组合式API)
选项式API:
<script>
export default {
// data() 返回的属性将会成为响应式的状态
// 并且暴露在 `this` 上
data() {
return {
count: 0
}
},
// methods 是一些用来更改状态与触发更新的函数
// 它们可以在模板中作为事件监听器绑定
methods: {
increment() {
this.count++
}
},
// 生命周期钩子会在组件生命周期的各个不同阶段被调用
// 例如这个函数就会在组件挂载完成后被调用
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
组合式API
<script setup>
import { ref, onMounted } from 'vue'
// 响应式状态
const count = ref(0)
// 用来修改状态、触发更新的函数
function increment() {
count.value++
}
// 生命周期钩子
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
应用场景:
-
当你不需要使用构建工具,或者打算主要在低复杂度的场景中使用vue,例如渐进增强的应用场景,推荐使用选项式API
-
当你打算用Vue构建完整的单页应用,推荐使用组合式API+单文件组件
import{reactive} from ‘vue’
export default{
props:{
item:string
}
//setup函数会在beforeCreate之后,created之前执行,相当于预设配置
//setup函数的第一个星灿,接受props数据,通过props.item获取
setup(props){
const state = reactive({
name:'abc'
})
return state
}
}
注意:在setup函数中无法访问到this
reactive函数
reactive函数接受一个普通对象
const state = reactive({
num:1
})
使用:
import{reactive} from ‘vue’
export default{
props:{
item:string
}
//setup函数会在beforeCreate之后,created之前执行,相当于预设配置
//setup函数的第一个星灿,接受props数据,通过props.item获取
setup(props){
const state = reactive({
name:'abc',
id:4,
arr:[],
})
return state
}
}
<template>
<div>
{{name}}
</div>
</tempalte>
ref
ref()函数用来给定的值创建一个响应式的数据对象,ref()函数调用的返回值是一个对象,这个对象上只包含一个value属性。
import {ref} from 'vue'
setup(){
//在setup方法中调用ref函数,创建响应式数据对象
var c = ref(10);
return {c}
}
<template>
<div>
{{c}}
</div>
</tempalte>
ref和reactive结合
import {reactive,ref,onMounted} from 'vue'
export default {
setup(){
var state = reactive({
a:ref(100)
})
onMounted(()=>{
state.a+=10
})
return state
}
}
ref和reactive的区别
他们两个用法相似,ref一般用于基本数据类型,reactive用于复杂数据类型,reacive不能处理基本数据类型,会没有响应式。
toRefs()将reactive创建出来的对象都转换为ref形式的响应式数据
export default{
setup(){
let state = reactive({
id:10
});
function change(){
state.id+=1;
}
return {
...state,
change
}
}
}
使用解构返回对象后,会将对象的响应式丢失,不会再跟新数据到页面上
这种情况就可以使用toRefs();
return {
...toRefs(state),
change
}
//多个方法定义
setup(){
let state = reactive({
id:10
});
function change(){
}
const methods = {
fun1(){},
fun2(){},
}
return {
...toRefs(state),
...methods,
change
}
}
computed计算属性
setup(){
let state = reactive({
id:10,
n1:computed(()=>{state.id+1})
})
return state;
}
watch监听
setup(){
let state = reactive({
id:10,
n1:computed(()=>{state.id+1})
})
let watch = watch(()=>state.id,(cur,old)=>{
if(cur%2==0){
console.log('偶数')
}
})
onUnmounted(()=>{
watch();//停止监听
});
return state;
}
生命周期新旧对比
beforeCreate----->setUp()
created---------->setUp()
beforeMount------>onBeforeMount();
mounted---------->onMounted();
beforeUpdate----->onBeforeUpdate();
updated---------->onUpdated();
beforeDestroy---->onUnmount();
destroyed-------->onUnmounted();
errorCatched----->onErrorCatched();
Suspense异步组件
<Suspense>
<template #default>
<list/>//加载list组件,如果组件数据未加载会先显示下面的内容
</template>
<template #fallback>
<div>loading.......</div>
</template>
</Suspense>
路由
import {useRouter,useroute} from 'vue'
获取路由id
const route = useRoute();//当前路由
const router = useRouter();//全局路由
const id = route.params.id
vuex4的使用
import {createStore} from ‘vuex’
const state = {
isShow:false
}
var getter = {
show(state){
return state.isShow;
}
}
var actions = {
SHOW({commit}){
commit('SHOW')
}
}
const mutations = {
SHOW(state){
state.isShow = true
}
}
const store = createStore({
state,
getter,
actions,
mutations
})
export default store;
ref()获取dom
<input type="text" ref="refInput"/>
const refInput = ref();
封装axios
import axios from 'axios'
const service = axios.create({
// baseURL: 'process.env.VUE_APP_BASE_API',
withCredentials: true,
timeout: 60 * 1000
})
service.interceptors.request.use(
config => {
return config
},
error => {
return Promise.reject(error)
}
)
service.interceptors.response.use(
response => {
const res = response.data
return res
},
error => {
return Promise.reject(error)
}
)
export default service