526互联

vue3

发布时间 2023-10-07 22:25:16作者: 别管鱼油我了

vue3介绍

vue3完全兼容vue2

# tree-shaking是一种消除死代码的性能优化理论
# TypeScript
-javascript:坑---》填坑---》弱类型
-typeScript：强类型语言

 

组合式api和配置项api

vue3 兼容vue2---》vue2的内容，vue3完全适用
vue3 不建议这么用了,建议使用组合式api，不建议使用配置项api

配置项api：

export default {
        data(){
            name:ss
        }
        mehtods:{
            console.log(name)
        }
    }

组合式api：

setup{
        var name =ss
        console.log(name)
    }

 

创建vue3项目

两种方式：

vue-cli：vue脚手架---》创建vue项目---》构建vue项目--》工具链
跟之前一样
- vite ：https://cn.vitejs.dev/
-npm create vue@latest
选择即可

运行vue3项目

vue-cli跟之前一样

vite创建的：

npm install   

npm run dev

vite为什么启动的快

冷启动，热加载，按需编译

编程语言的链式调用

对象.changeName('lqz').printName().showAge()

python实现链式调用

class Person:
def changeName(self,name):
self.name=name
return self
def printName(self):
print(self.name)
return self

 

setup函数

使用vue-cli创建的项目来讲

setup的两个注意点

1、setup执行时机：

　　在beforeCreate之前执行一次，this是undefined

2、setup参数：

props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。

context：上下文对象

attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs

slots：收到的插槽内容，相当于this.$slots

emit：分法自定义书简的函数，相当于this.$emit

 

总结：

setup执行是在beforeCreate，没有this对象，以后不要用this了

如果写setup函数，想接收父组件自定义属性传入的值，需要
export default {
setup(props) {
console.log(props.msg)
},
props: ['msg']
}

如果是vue3的最新写法，想接收父组件自定义属性传入的值，需要
<script setup>
defineProps(['msg'])
</script>

 ref函数

变量要具备响应式---》页面内容变化，变量和变，变量变化，页面也变
普通变量，通过ref绑定响应式
引用类型变量：通过reactive 绑定响应式

 

reactive函数

// 变量要具备响应式---》页面内容变化，变量和变，变量变化，页面也变
// 普通变量值类型，通过ref绑定响应式   数字，字符串
// 引用类型变量：通过reactive 绑定响应式 对象，数组

因为引用了组件所以setup中要传入props，因为组件中有

HomeView.vue

 HelloWorld.vue

 data无法拿出原来的对象，他是代理对象

 

ref

作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
JS中操作数据： xxx.value
模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
备注：
接收的数据可以是：基本类型(值类型)、也可以是对象(引用类型)类型。

reactive

作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是“深层次的”,无论套多少层，都具备响应式

# 总结：
如果用基本数据类型：数字，字符串，布尔，用ref做响应式
如果是对象类型，用ref和reactive都可以，但是建议使用reactive
如果使用ref包裹对象类型，多了一层value

 

计算监听属性

计算属性

 

 监听属性

 

生命周期

vue2 生命周期---8个

vue3 变了
-想把生命周期写下setup函数中

-把生命周期写在配置项中
beforeDestroy改名为 beforeUnmount
destroyed改名为 unmounted

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted

<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script>

import axios from "axios";
import {
  computed,
  watch,
  reactive,
  ref,
  watchEffect,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

export default {
  name: 'HomeView',
  setup() {

    // 第一个beforeCrete
    console.log('我是beforeCrete')

    // 第二个Creted
    let name = ref('lqz')
    console.log('Creted')
    // axios.get().then(res => {
    //   name.value = res.data.name
    // })

    // 直接启动定时器
    let t = setInterval(() => {
          console.log('lqz')
        }, 3000
    )
    // 第三个：onBeforeMount
    onBeforeMount(() => {
      console.log('挂载了')
    })

    onBeforeUnmount(() => {
      clearInterval(t)
      t = null

    })


    return {}


  },


}


</script>

torefs

vue3 setup写法

# 以后vue3推荐，把setup函数的代码，直接写在script中
<script setup>
定义变量
写函数
不用return，在html中直接使用
</script>

# 使用组件，直接导入，不需要配置，直接用即可
import HelloWorld from "../components/HelloWorld.vue";
在html中直接用：<HelloWorld msg="NB"></HelloWorld>

# 自定义属性，在子组件中接收

    <script setup>
    defineProps({
      msg: {
        type: String,
        required: true
      }
    })
    </script>