Vue3学习

关注

原创 2023-07-14 16:08:27 501 阅读 AI 写同款· GEO 优化 ›

全网最全的vue3入门教程『图文并茂』 Vue 3 是一个流行的开源JavaScript框架，用于构建用户界面和单页面应用。它带来了许多新特性和改进，包括更好的性能、更小的打包大小、更好的TypeScript支持、全新的组合式 API，以及一些新的内置组件。你可以创建自定义的hooks来复用代码。一个自定义hook就是一个函数，它可以使用其他的响应式数据和组合式API。import {setup() {你可以使用customRef函数来创建一个自定义的响应式引用。这允许你控制和观察当引用的值发生变化时的行为。阅读详情

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