vue3的使用

昨日回顾

# 1 vuex:状态管理器，vue存数据的地方，跨组件间通信
	-vue2使用版本是vuex3
    -vue3使用版本是vuex4
    -npm install vuex@3
	-三个状态
    	-state：存数据的地方,对象，定义一些变量，所有组件中都可以用---》this.$store.state.变量
        -actions：中转站，在组件中想修改值，this.$store.dispatch('函数名')
        	-逻辑判断，跟后端交互
            -context.commit('mutations中得函数'),
        -mutations：真正操作数据的地方，直接操作state，this.$store.commit('mutations中得函数')
        -组件可以直接调用mutations中得函数，直接跟mutations交互
        
    -跨组件间通信小案例
    
    
# vue-router
	-vue-router:3版本对应vue2，4版本对应vue3
    
	-单页面应用：index.html,以后都是页面组件间的切换，借助于vue-router
    -使用步骤：
    	-在任意组件中：
        	-this.$router:路由对象，控制路由的跳转，push，go，back。。。
            -this.$route：当前路由，当前路径对象，query，params
    	-只需要在router/index.js的routes配置路由对象即可，浏览器地址栏中输入路径就显示某个页面
    
    -路由嵌套：routes内部对象中写： children ---》/goods/list
    
    -路由跳转：
    	-html中跳转：router-link  to属性 可以之间写字符串路径，数据绑定对象{}
        -js跳转：this.$router.push('goods')
        
        
    -跳转携带数据：
    	-get地址中参数：this.$route.query.参数名
        -路由中分割出来的参数：this.$route.params.【router/index.js的routes使用:绑定的】
    
    -路由守卫：
    	-进入该路径之前，进行一些逻辑判断，允许进还是不允许
        -权限的控制
        	-router.beforeEach()
            -router.afterEach()

vue3介绍

1.性能的提升
    打包大小减少41%
    初次渲染快55%, 更新渲染快133%
    内存减少54%
2.源码的升级
    使用Proxy代替defineProperty实现响应式
    重写虚拟DOM的实现和Tree-Shaking
3.拥抱TypeScript
    Vue3可以更好的支持TypeScript
4.新的特性
    Composition API（组合API）
        setup配置
        ref与reactive
        watch与watchEffect
        provide与inject
    新的内置组件
        Fragment
        Teleport
        Suspense
    其他改变
        新的生命周期钩子
        data 选项应始终被声明为一个函数
        移除keyCode支持作为 v-on 的修饰符

5 组合式API和配置项API
	-使用组合式API
    -配置项API
    	-{
            name:'xx',
            data:function(){},
            methods:{}
        }

创建vue3项目的两种方式

# vue-cli:创建vue2和vue3   
	-跟之前一样
# vite：创建vue3，创建最新
	npm init vue@latest
    # Pinai
# vite创建另一种方式：创建vue3.0.4版本
    npm init vite-app <project-name>
    ## 进入工程目录
    cd <project-name>
    ## 安装依赖
    npm install
    ## 运行
    npm run dev

# 以后再页面中的this，已经不是vue2中的vc对象了，是一个代理对象

<template>
  <h2>{{ name }}</h2>
  <h3>{{ age }}</h3>
  <button @click="handleClick">点我看美女</button>
  <br>
  <button @click="handleAdd">点我，age+1</button>
</template>

<script>


export default {
  name: 'App',
  setup() {   // setup中没有this了
    // 以后所有的变量定义函数编写，都写在这个函数中
    // 定义变量 如果这么写，变量渲染没问题，但是没有响应式，页面变了，变量不会变
    let age = 19
    let name = 'lqz'
    // 定义函数
    function handleClick() {
      alert('美女~~~')
    }
    let handleAdd = () => {
      console.log('我要开始加了')
      age=age+1
      console.log(age)
    }
    // 函数必须有返回值
    return {
      age, name, handleClick, handleAdd
    }

  }
}
</script>

ref和reactive

# 导入使用：import {ref, reactive} from 'vue'
#  基本数据类型（数字，字符串，布尔）如果要加响应式：使用ref包裹，在模板中之间使用，js中通过对象.value取值
let age = ref(19) // age 已经不是数字了，是RefImpl的对象
let name = ref('lqz')
let list = reactive(['1', '2', '3'])
#  对象，数组引用使用reactive,ref可以包对象类型，但是用的时候必须.value

<template>
  <h2>{{ name }}</h2>
  <h3>{{ age }}</h3>
  <br>
  <button @click="handleAdd">点我，age+1</button>
  <br>
  <button @click="handleChangeName">点我name变化</button>
</template>

<script>

import {ref, reactive} from 'vue'

export default {
  name: 'App',
  setup() {
    let age = ref(19) // age 已经不是数字了，是RefImpl的对象
    let name = ref('lqz')
    let handleAdd = () => {
      console.log('我要开始加了,age是', age)
      age.value = age.value + 1
      console.log('我要开始加了,age是', age.value)
    }
    function handleChangeName(){
      name.value=name.value+'?'
      console.log(name)
    }

    return {
      age, name, handleClick, handleAdd,handleChangeName
    }

  }
}
</script>

计算属性

与vue2的计算属性用途一样，只是写法的区别
export default {
  name: 'App',
  // computed:{
  //   fullName:function (){}
  // },
  setup() {
    // 1 计算属性案例1
    // let firstName = ref('刘')
    // let lastName = ref('清政')
    // // 定义计算属性
    // let fullName = computed(() => {
    //   return firstName.value + lastName.value
    // })

    // 2 计算属性案例2
    let person = reactive({
      firstName: '刘',
      lastName: '清政',
    })
    // 定义计算属性
    person.fullName = computed({
      get() {
        return person.firstName + '-' + person.lastName
      },
      set(value) {
        console.log(value)
        const nameArr = value.split('-')
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]

      }
    })
    return {
      person
    }


  }
}

监听属性

export default {
  name: 'App',
  // computed:{
  //   fullName:function (){}
  // },
  setup() {
    // 1 计算属性案例1
    // let firstName = ref('刘')
    // let lastName = ref('清政')
    // // 定义计算属性
    // let fullName = computed(() => {
    //   return firstName.value + lastName.value
    // })

    // 2 计算属性案例2
    let person = reactive({
      firstName: '刘',
      lastName: '清政',
    })
    // 定义计算属性
    person.fullName = computed({
      get() {
        return person.firstName + '-' + person.lastName
      },
      set(value) {
        console.log(value)
        const nameArr = value.split('-')
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]

      }
    })
    return {
      person
    }


  }
}

生命周期

export default {
  name: 'App',
  // computed:{
  //   fullName:function (){}
  // },
  setup() {
    // 1 计算属性案例1
    // let firstName = ref('刘')
    // let lastName = ref('清政')
    // // 定义计算属性
    // let fullName = computed(() => {
    //   return firstName.value + lastName.value
    // })

    // 2 计算属性案例2
    let person = reactive({
      firstName: '刘',
      lastName: '清政',
    })
    // 定义计算属性
    person.fullName = computed({
      get() {
        return person.firstName + '-' + person.lastName
      },
      set(value) {
        console.log(value)
        const nameArr = value.split('-')
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]

      }
    })
    return {
      person
    }


  }
}

hooks

-什么是hook
-本质是一个函数，吧setup函数中使用的Composition API进行了封装
类似于vue2中的mixin
自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂

import {onMounted, onUnmounted, reactive} from "vue";

export default function () {
    let p = reactive({
        x: 0,
        y: 0
    })

    function getPoint(event) {
        console.log(event)
        p.x = event.pageX
        p.y = event.pageY
    }

    // 声明周期钩子的onMounted，当页面挂载就会执行
    onMounted(() => {
        // 给数鼠标点击增加监听，当点击鼠标，就会执行这个函数
        window.addEventListener('click', getPoint)
    })
    // 组件被销毁时，把功能去掉
    onUnmounted(() => {
        window.removeEventListener('click', getPoint)
    })

    return p
}

<template>
  <h2>x坐标是：{{ p.x }},y坐标是:{{ p.y }}</h2>
</template>

<script>
import {reactive, onMounted, onUnmounted} from 'vue'
import usePoint from '../hook/uesPoint.js'

export default {
  name: "Point",
  setup() {
    let p = usePoint()
    return {p}
  }
}

</script>

<style scoped>

</style>

toRefs

# setup函数，return {...toRefs(data)}可以解压复制
export default {
  name: 'App',

  setup() {
    let data = reactive({
      name: 'lqz',
      age: 19,
      isShow: true
    })

    function handleShow() {
      console.log('ssdaf')
      data.isShow = !data.isShow
      data.age++
    }

    return {
      ...toRefs(data),
      handleShow
      // data
    }

  }
}

# vue-admin-template-master
	-跑起来
	-package.json 第7行加入
    "dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",

    
    
# java版的若依，带权限控制的后台管理模块
# python ：django-vue-admin   
# python flask-vue-admin
# go:gin-vue-admin