首页 > 其他分享 >Vue - 09 Vue3介绍

Vue - 09 Vue3介绍

时间:2023-02-22 19:14:33浏览次数:63  
标签:good vue setup 09 value Vue let Vue3 ref

目录

Vue - 09 Vue3介绍


1.vue 3

相比vue 2性能提示了,代码更简洁了

1.1 介绍

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 的修饰符
   

1.1 组合式API和配置项

① vue 2:配置项API

new Vue({
     el:'#app',
     data:{}
 })

② vue 3:组合式API

let name='lqz'
let add=()=>{ 
}

2 Vue3 创建项目

Vue3 支持使用vue-cli来创建项目,但更推荐使用vite来创建项目

2.1 使用vue-cli创建项目

创建跟之前vue2 一样,只是选择vue版本的时候,选择vue3

创建完成,使用pycharm打开,并运行

2.2 使用vite创建项目

新的前端构建工具,最大的优势就是速度快

官网:https://cn.vuejs.org/guide/scaling-up/tooling.html#project-scaffolding

使用步骤

① 安装

npm init vue@latest

② 选择插件和设置

vueRouter等

③ cd切换到项目目录中安装依赖

npm install

④ 运行项目

npm run dev

image-20230222152840516

  • vueRouter:跟之前一样
  • Pinia:用来替换Vuex的,新一代的状态管理器

3 setup函数

3.1 vue2与vue3创建vue实例的区别

①vue2中创建的是vue实例

在vue中有,this.$routerthis.$refs...等等

②vue3中创建的是object,没有this了,想用router对象需要导入才能使用

image-20230222102514516

VUE3中的template中也可以不用写在一个div中了,配置项API不建议用了,建议用setup函数

3.2 setup函数

① vue3在script标签中中写setup函数,在setup函数中写组合式API,不再写配置项

② 定义变量,定义函数,一定要return,在templage中才能使用

③ 但是setup中的变量失去了响应式,需要配合ref和reactive来使用响应式

  • 案例:点击按钮增加 !
<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');
    const increment = () => {
      message.value += '!';
    };
    return {
      message,
      increment
    };
  }
};
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

image-20230222163319581

4 ref和reactive创建响应式数据对象

4.1 ref和reactive:创建响应式数据对象

<script setup>
import {ref} from 'vue'

let name = 'duoduo'

let good_num1 = 100

let good_num2 = ref(100)


let goodNum1 = () => {
  good_num1 ++
  console.log(good_num1)
}
let goodNum2 = () => {
  good_num2.value = good_num2.value+1
  console.log(good_num2.value)
}
</script>

image-20230222163717350

【没有ref】使用响应式的变量,只有在组件整体dom刷新的时候才会更新

【有ref】响应式的变量,只要点击就会立即更新

4.2 配置项API和组合式API 混写

同时写了【组合式API:setup 】和【配置项API】

【setup】中定义的变量和函数,在【配置项API】中,则可以直接使用this.变量,函数调用

但是在原来【配置项】中定义的变量,函数,在【setup】中无法使用

4.3 ref和reactive的使用类型

①ref通常用来包裹:数字、字符串类型

ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value

②reactive用来包裹:数组、对象类型

reactive定义的数据:操作数据与读取数据:均不需要.value

5 computed计算属性

在 Vue 3 中,我们可以使用 computed 函数来定义计算属性。与 Vue 2 不同的是,computed 函数现在是从 @vue/reactivity 中导入的,而不是在组件选项中直接定义。

5.1 vue3中的计算属性

使用方法

    const state = reactive({
      firstName: 'John',
      lastName: 'Doe'
    });

    const fullName = computed(() => {
      return `${state.firstName} ${state.lastName}`;
    });

案例:

<template>

  <h2>这里是test页面</h2>

  <div> 【没有ref】 num①: {{ good_num1 }}</div>

  <button @click="goodNum1"> 点击111</button>

  <div> 【有ref】 num② :{{ good_num2 }}</div>
  <button @click="goodNum2"> 点击222</button>
  <div> 总计数据---num①+num②:{{ totalNum }}</div>

</template>

<script setup>
import {computed, ref} from 'vue'

let good_num1 = 100

let good_num2 = ref(100)
// let good_num2 = 100


let goodNum1 = () => {
  good_num1++
  console.log('没有ref属性', good_num1)
}
let goodNum2 = () => {
  good_num2.value = good_num2.value+1
  console.log(totalNum.value)
  console.log('有ref', good_num2.value)
}


// 计算属性
let totalNum = computed(()=>{
    return good_num1 + good_num2.value
})
</script>

5.2 计算属性改值

计算属性的修改值可以像普通属性一样进行修改,只需要使用赋值语句来修改计算属性的依赖数据即可

let good_num2 = ref(100)
// let good_num2 = 100


let goodNum2 = () => {
  good_num2.value = good_num2.value + 1
  console.log(totalNum.value)
  console.log('有ref', good_num2.value)
}

let totalNum = computed({
  get() {
    return good_num2
  },
  set(newValue) {
    return totalNum = newValue
  }
})

6 watch 监听属性

6.1 watch与watchEffect

watch 函数的第一个参数是一个函数,它返回要监听的数据;第二个参数是回调函数,它接收两个参数:新值和旧值。当被监听的数据发生变化时,回调函数将被执行,可以在这里执行一些副作用操作。

watchEffect 函数,它可以自动侦听响应式数据的变化,并在数据发生变化时执行回调函数。与 watch 函数不同的是,watchEffect 函数的回调函数不接收新值和旧值,而是在回调函数中直接访问被监听的数据。

watch(() => 监听的变量, (新值, 旧值) => {
console.log(`监听的变量: ${旧值} ->    ${新值}`);
});   

watchEffect(() => {
    console.log(`监听的变量: ${监听的变量}`);
});

案例:

import {ref, watch, watchEffect} from 'vue';

export default {
  setup() {
    const name = ref('duoduo')
    const newName = ref('AAAAAAAa')
    const age= 19
    let changeName = () => {
      name.value = newName.value
    };
    watch(() => name.value, (newValue, oldValue)=>{
      console.log(`原来的: ${oldValue}`)
      console.log(`新的: ${newValue}`)
    }
  )
    watchEffect(() => {
      console.log(`name:${name.value}发生变化了`)
    });
    watchEffect(() => {
      console.log(`age:${age}发生变化了`)
    });

    return {
      name: name,
      newName: newName,
      changeName
    };
  }
};

7 vue3中的生命周期钩子函数

7.1 vue2与vue3对比

基本一致,只是beforeDestroy和destroyed变成了eforeUnmount和unmounted

vue2 vue3
beforeCreate beforeCreate
created created
beforeMount beforeMount
mounted mounted
beforeUpdate beforeUpdate
updated updated
beforeDestroy eforeUnmount
destroyed unmounted

7.2 vue3项目中的写法

在vue3项目中,beforeCreate和created两个方法中编写的代码,直接放到setup()方法中即可,无需重新导入钩子函数

而其他的生命周期钩子函数,需要先导入后卸载setup()方法中

vue3生命周期钩子函数 vue3项目中的写法
beforeCreate setup()
created setup()
beforeMount beforeMount
mounted mounted
beforeUpdate beforeUpdate
eforeUnmount updated
unmounted eforeUnmount

8 toRefs

toRefs 是一个可以将响应式对象转换为响应式属性对象的函数。

它的作用是将一个响应式对象的所有属性转换为响应式属性,这样就可以在一个函数组件中以解构的方式访问这些属性并绑定到模板中。

# 以后setup的返回值可以直接使用
  setup() {
    let data = reactive({
      name: 'lqz',
      age: 19,
      gender: '男'
    })
    return {...toRefs(data)}
  }
# 以后在模板中直接用  {{name}}

9 vite创建的vue3项目

9.1 script setup的作用

script标签上加上setup属性,那么这个script中的代码则可以直接放到 setup函数中,不用return出去了

<script setup>
  
...
</script>

9.2 lang=ts

script标签上加上lang=ts,所以script标签里面代码可以使用typescript写

而typescript完全兼容javascript继续写js代码没问题

标签:good,vue,setup,09,value,Vue,let,Vue3,ref
From: https://www.cnblogs.com/DuoDuosg/p/17145527.html

相关文章

  • vue3
    1vue3介绍#1vue项目的版本,新项目使用vue3,有部分老项目使用vue2#vue3的变化1.性能的提升 -打包大小减少41% -初次渲染快55%,更新渲染快133% ......
  • vue
    今日内容1.vue3介绍2.vue3创建项目3.setup函数4.ref和reactive5.计算属性和监听属性6.生命周期7.toRefs8.scriptsetup的作用和lang=ts9.vue后台管理模板1.vue3......
  • vue3介绍,vue3创建项目,setup函数,ref和reactive,计算属性监听属性,生命周期,torefs,vue后台
    内容回顾props不需要再data中定义了,它就在当前组件对象身上了thisprops:[]props:props:{name:{type:String,default:’123’}}父子间通信自定义属性—-props自定义......
  • 这样子配置丢到nginx 是没发调用的,因为nginx无法用用vue的代理,pathRewrite重写只在vu
    这样子配置丢到nginx 是没发调用的,因为nginx无法用用vue的代理,   ......
  • vue中key的作用
    1.结论key在Vue是DOM对象的标识;进行列表展示时,默认key是index;如果数据只做展示使用,使用index作为key是没有任何问题的;如果使用index作为key,而后续操作会破坏顺序,一定会带......
  • vue虚拟Dom详解
    1.什么是虚拟dom?虚拟dom本质上是一个js对象,用来描述视图的界面结构,在vue中,每个组件都有一个render函数,每个render函数都会返回一个虚拟dom树,这意味着每个组件都对应着一......
  • VUE的生命周期
    Vue的生命周期Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识,以此作为记录。Vue的生命周期就是vue实例从创建到销毁的全过程,也就是newVue()开始就是vue生命......
  • Vue如何渲染几千几万条数据(DOM)而不卡顿
    首先介绍原生的js渲染大量DOM会出现的问题和解决方法一、渲染大量DOM会出现的问题会出现较长的白屏事件。<html> <head> <title>渲染会卡的代码示例</title> </he......
  • Vue3从基础到精通
    目录一、Vue3介绍1.Vue3的变化2.Vue2和Vue3的不同之处二、Vue3创建项目1.用vue-lci创建步骤2.用vite创建步骤三、setup函数四、ref、reactive、toRefs五、计算属性和监听......
  • 【Bootstrap】009-全局样式:辅助类
    目录​​一、情境文本颜色​​​​1、说明​​​​2、演示​​​​代码演示:​​​​运行结果:​​​​3、处理差异​​​​4、向辅助技术传递意义​​​​二、情景背景色​​......