首页 > 其他分享 >vue

vue

时间:2023-02-22 18:59:19浏览次数:39  
标签:vue setup value let vue3 ref

今日内容

1.vue3介绍

2.vue3创建项目

3.setup函数

4.ref和reactive

5.计算属性和监听属性

6.生命周期

7.toRefs

8.script setup的作用和lang=ts

9.vue后台管理模板

1.vue3介绍

1.vue项目的版本,新项目使用vue3,有部分老项目使用vue2
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 的修饰符
             
组合式API和配置项API
	vue2 :配置项API
         new Vue({
             el:'#app',
             data:{}
         })
        
    vue3: 组合式API
        let name='lqz'
        let add=()=>{ 
        }

2.vue3创建项目

使用vue-cli

创建跟之前vue2 一样,只是选择vue版本的时候,选择vue3
创建完成,使用pycharm打开,并运行

vite

新建的前端构建工具,最大的优势就是速度快
	https://cn.vuejs.org/guide/scaling-up/tooling.html#project-scaffolding
使用步骤:
	安装 :npm init vue@latest
    	按需选择,vueRouter
    cd到项目中执行cnpm install 把依赖装好
    运行:npm run dev
   
    vueRouter:跟之前一样
    Pinia:用来替换Vuex的,新一代的状态管理器
    链式调用(抽时间)
    
为什么这么快
	创建项目快----》不安装第三方依赖
    执行项目,热更新----》按需编译

3.setup函数

把项目做成最简洁的
vue2的创建vue实例和vue3创建vue实例的区别
	new Vew()---->是Vue的实例,里面有$store,$refs...
    createApp(App)--->是个对象,对象里有东西,没有$store,$refs...,以后有用,都是导入使用
以后vue3 的<template>,不需要写一个标签了
以后都写在setup函数中,定义变量,定义函数,一定要return,在templage中才能使用
但是失去了响应式

4.ref和reactive

有响应式
	以后定义变量,如果想有响应式就用 ref包裹起来,再修改变量,需要用 变量名.value 修改
配置项api和组合式api可以混写,不建议
	在前在data中定义的变量
    在setup中定义的变量    
  总结:
    	在setup中定义的变量和函数,在之前配置项api中可以直接使用this.变量,函数调用即可
    	但是在原来配置项中定义的变量,函数,在setup中无法使用
不同类型做响应式
	ref通常用来包裹,数字,字符串类型,以后使用  xx.value
    reactive用来包裹数组和对象类型    以后使用  直接用即可
总结  
ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value。
reactive定义的数据:操作数据与读取数据:均不需要.value

5.计算属性和监听属性

计算属性

computed 的配置项中的写法,不建议用了
	computed:{
        fullName(){
          return this.firstName+this.lastName
        }
      },
vue3 新写法
	let person = reactive({
      firstName: '',
      lastName: '',
    })
   let fullName = computed(() => {
    return person.firstName + person.lastName
    })
计算属性取值和修改值
    let fullName = computed({
      get() {
        return person.firstName + person.lastName
      },
      set(value) {
        person.firstName = value.slice(0, 1)
        person.lastName = value.slice(1)
      },
    })

监听属性

# 组合式api写法,只要name发生变化,就会触发匿名函数执行
   let name = ref('lqz')
   watch(name, (newName, oldName) => {
      console.log('name变了')
      console.log('老的', oldName)
      console.log('新的', newName)
    })

# watchEffect 用法,只要age变化,就会执行,age不变化,就不会执行
    watchEffect(() => {
      console.log(age.value)
    })

6.生命周期

vue3的变化,不推荐了
	-vue2       和    vue3比较
    beforeCreate===>beforeCreate
    created=======>created
    beforeMount ===>beforeMount
    mounted=======>mounted
    beforeUpdate===>beforeUpdate
    updated =======>updated
    beforeDestroy ==>beforeUnmount
    destroyed =====>unmounted
不推荐用这种写法了,配置项写法,统统写在setup中
    beforeCreate===>setup()
    created=======>setup()
    beforeMount ===>onBeforeMount
    mounted=======>onMounted
    beforeUpdate===>onBeforeUpdate
    updated =======>onUpdated
    beforeUnmount ==>onBeforeUnmount
    unmounted =====>onUnmounted
以前写在created中的代码,现在直接写在setup开始即可
 let show = ref(false)
 axios.get().then(res=>{
      show.value=res.data.show
 })

7.toRefs

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

8.script setup的作用和lang=ts

<script setup>
import {ref} from 'vue'
let name = ref('lqz')
let handleClick = () => {
  alert('美女')
}
</script>
以后 这个script中的代码直接放到 setup函数中,不用return了
lang=ts
里面代码使用ts写,而ts完全兼容js,继续写js代码没问题

9.vue后台管理模板

公司内部项目,会写后台管理,往上有很多vue开源的后台管理的框架,咱们只需要在上面做二次开发
django-vue-admin 前端---》D2Admin 
若依:vue前端  用来   vue-element-admin
elamin前端   drf  写了基于rbac权限管理的框架
https://gitee.com/liuqingzheng/vue_admin

标签:vue,setup,value,let,vue3,ref
From: https://www.cnblogs.com/yueq43/p/17145485.html

相关文章

  • 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五、计算属性和监听......
  • Vue3
    目录Vue3创建项目vite创建项目使用步骤setup函数ref和reactiveref使用方法reactive使用方法计算属性和监听属性计算属性监听属性生命周期toRefsvue后台模板介绍Vue3与vu......
  • vue+html5实现上传图片
    原理:dispatchEvent自定义触发事件,常用于自定义鼠标事件或点击事件,原生控件input打开上传文件方案:vue项目,点击自己的上传文件图标,通过dispatchEvent主动触发一个自定义......
  • Vue3项目相对Vue2发生的变化
    Vue3项目相对Vue2发生的变化Vue3简介性能的提升打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%源码的升级使用Proxy代替defineProperty实现响应式......