vue3 基础使用

vue3 基础使用

1、vue3介绍

2、vue3创建项目的两种方式

vue-cli:创建vue2和vue3
跟vue2一样

vite：创建vue3，创建最新
npm init vue@latest

vite创建另一种方式：创建vue3.0.4版本
npm init vite-app <project-name>

• 进入工程目录
  cd <project-name>
• 安装依赖
  npm install
• 运行
  npm run dev

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

3、setup函数

vue 心怎的setup配置项函数
在里面可以定义变量
定义函数
必须return 变量和函数，在模板中才能使用

<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>

setup 函数可以接收参数 context
接收上下文 当父传子 传来的值 会在context中 弥补this的作用

4、ref和reactive

导入使用：import {ref, reactive} from ‘vue’

总结
基本数据类型（数字，字符串，布尔）如果要加响应式：使用ref包裹，在模板中之间使用，js中通过对象.value取值

对象，数组引用使用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>

5、计算和监听属性

5.1、计算属性

export default {
  name: 'App',
  //普通写法
  setup(){
    let firstname = ref('')
    let lastname = ref('')

    //对象写法
    let person=reactive({
      firstname:'赵',
      lastname:'日天'

    })
      
    // let fullName = computed(() => {
    //   return firstName.value + lastName.value
    // })
    let fullName = computed(()=>{
      return person.firstname+person.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{firstname,lastname,person,fullName}
  }
   
}

5.2、监听属性

import {computed, watch, ref, reactive, watchEffect} from 'vue'

export default {
  name: 'App',
  setup() {
    // 1 计算属性案例1
    let name = ref('lqz')

    // 定义监听属性
    watch(name, (newValue, old) => {
      console.log('name变了')
      // console.log(old)
      // console.log(newValue)
    })
    // vue3 多的watchEffect,只要函数中使用的变量发生变化，它就会触发
    watchEffect(() => {
      // 只要该函数中使用的变量发生变化，它就会触发
      // let a = name.value + '?'
      console.log('watchEffect配置的回调执行了')
    })
    return {
      name
    }


  }
}

6、生命周期

vue3.0 中可以继续使用vue2.x 中的生命周期钩子

beforeDestory 改名为beforeUnmount
destroyed改名为unmounted

Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted

7、hooks

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

7.1、hook/usePoint.js

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
}

7.2、在想使用的组件中引入使用即可

<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>

8、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
    }

  }
}

9、后台管理模板

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