vue3 知识

vue3介绍

Vue3的变化:
    1、vue3完全兼容vue2，但是vue3不建议用vue2的写法
    2、拥抱TypeScript，ts完全兼容js
    3、组合式API和配置项API
                vue2 是配置项api
                vue3 组合式api

vue3项目创建和启动

# 创建vue3项目：
            vue-cli   官方不太建议用了
            vite      目前官方推荐：新一代前端构建工具

# vue-cli创建：
        命令行中：vue create vue3_demo001
        其他跟之前一样，只是选vue版本选3版本

# vue3的项目简单解释：

// main.js
import { createApp } from 'vue'  // 通过 createApp创建vue实例
import App from './App.vue'  // 根组件
import router from './router' // vue-router
import store from './store' // vuex

var vue = createApp(App) // 创建vue实例
vue.use(store)// 使用vuex
vue.use(router)// 使用vue-router
vue.mount('#app')// 挂在index.html中得div

# 其他写起来跟之前写vue2完全一致，vue3是兼容的

# vite创建vue3（速度快）
    不管是创建项目还是运行项目速度都很快，因为它按需编译，不再等待整个应用编译完成

cnpm create vite vue3_demo002  //创建项目
    
cnpm install  // 打开项目，安装依赖
    
npm run dev   // 运行项目

# 使用vite和vue3创建项目的文件简单解释:

// main.js    
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app') # 没有使用第三方插件

// HelloWorld.vue   组合式api写法，跟之前不一样了

# 实现：创建vue2一样，自由选择一些插件, 在vue3上，建议使用 pinia 做状态管理

# 常用的第三方插件，自己选即可:

                        npm create vue@latest    

setup函数

# vue3_demo001 :vue-cli创建的---写法跟之前vue2一样
   vue3_demo002 ：vite创建，但是没有状态管理器和路由
   vue3_demo003：vite创建，有状态管理器和路由

# setup 函数，只有vue3中有：
            setup为Vue3.0中一个新的配置项，值为一个函数
            setup是所有Composition API（组合API）编写的位置
            组件中所用到的：数据、方法等等，均要配置在setup中
    setup函数的返回值：返回一个对象，对象中的属性、方法, 在模板中均可以直接使用
# 注意：
    1、尽量不要与Vue2.x配置混用
    2、Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法
    3、但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
    4、如果有重名, setup优先

vue3之ref

# 1、ref 用来做 基础变量 [数字，字符串，布尔] 的响应式
         reactive 用来做对象 [数组，字典] 的响应式

# 2、在子组件中暴露

vue3之toRefs

# 响应式：

        toRefs 可以把对象内部的所有值，都做成响应式
        改这些变量会影响到原来对象中得值

const person = reactive({name: 'lqz', age: 19})
let {name, age:nl} = toRefs(person)  // 等同于： name=ref(lqz)   age=ref(19)
// let {name, age} = person  // 等同于： name=lqz   age=19
function add() {
  nl.value++
  console.log(nl.value)
}

# 结构赋值：

let person = {name: 'lqz', age: 19}
let {name, age} = person //  普通解构赋值，name=person.name   age=person.age
let {name:a, age} = person // 重命名解构赋值：a=person.name   age=person.age
console.log(a)
console.log(age)

# 对象解压：

# toRef的使用:

const person = reactive({name: 'lqz', age: 19})
// const name=toRefs(person)  //{name:ref(name),age:ref(age)}
const name = toRef(person, 'name')  //name=ref(person.name)
function change() {
  name.value = 'xxx'
}

vue3之reactive

# ref和reactive总结：

 ref函数：
    作用: 定义一个响应式的数据
    语法: let xxx = ref(initValue)
    创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
    JS中操作数据： xxx.value
    模板中读取数据: 不需要.value，直接：

{{xxx}}

reactive函数：
    作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
    语法：let 代理对象= reactive(接收一个对象，返回一个代理对象
    reactive定义的响应式数据是“深层次的”,对象无论多少层，都可以

vue3之axio

# 安装：

cnpm install axios

# 在 setup 中直接发送请求

import axios from 'axios'
const filmList = reactive({result:[]})
axios.get('http://127.0.0.1:8000/film/').then(res => {
  console.log(res.data)
  filmList.result = res.data.results
})

# async 和 await 的使用

const filmList = reactive({result: []})
async function load() {
  // await必须写在被async修饰的函数中,也可以写在setup函数中
  let response = await axios.get('http://127.0.0.1:8000/film/')
  filmList.result = response.data.results
}
load()

# axios 的拦截器
    请求发出之前的拦截器
    请求响应回来的拦截器
        判断状态码是不是100，如果是100，继续走，不是100，直接弹错误

计算属性computed

  let person=reactive({name:lqz,age:19})
    # 1 只取值
    person.hobby=computed(()=>{
      return person.name+person.age
    })
    # 2 取值和赋值
    person.hobby=computed({
      get(){
        return 'xxxx'
      },
      set(newValue){
      }
    })

监听属性watch

生命周期

vue2 : 8个生命周期钩子
      beforeCreate：组件创建之前实现这个：组件html，js--》html和js都是空的
      created：组件创建完成后：js就有值了，html还是空的  （向后端发送ajax请求）
      beforeMount：挂载模板之前，js有值，模板(html) 还是空的（向后端发送ajax请求）
      mounted：挂载完成：js有值，模板有值
      beforeUpdate：只要页面发送变化或js变量发生变化，就会触发它的执行
      updated：刷新之后执行
      beforeDestroy：被销毁之前执行  （资源清理性工作）
      destroyed：被销毁之后执行
vue3 中变成：
    beforeDestroy改名为 beforeUnmount
    destroyed改名为 unmounted
 Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
        beforeCreate===>setup()
        created=======>setup()
        beforeMount ===>onBeforeMount
        mounted=======>onMounted
        beforeUpdate===>onBeforeUpdate
        updated =======>onUpdated
        beforeDestroy==>onBeforeUnmount
        destroyed=====>onUnmounted

setup写法

# 以后都使用组合式api
# 典型写法:
        

不需要return，它会自动return
如果注册局部组件，只需要导入组件即可，在template中就可以使用了
# 以后只需要在 setup 内，写变量，写函数即可

    const age=ref(0)
    function add(){
      age.value++
    }

# vue-router的使用
路由跳转：

    import {useRouter, useRoute} from 'vue-router'
    const router = useRouter() // 就是以前的this.$router
    const route = useRoute()  // 就是以前的this.$route

路由注册---跟之前一模一样
路由的api---跟之前一样:
            router.push({name:'home'})

路由嵌套，跟之前一样

路由守卫跟之前一样：
                router.beforeEach()

pinia和elementui-plus

# 之前用vuex，vue3上还可以用，但是使用 pinia 更好

import {useCounterStore} from '@/stores/counter'
const store = useCounterStore()
console.log(store.count)

# elementui-plus

npm install element-plus --save

// main.js中：
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

登录练习

使用setup写法
elmentui 登录 显示电影
没登录不允许访问首页--->重定向到登录

今日思维导图：