首页 > 其他分享 >vue3介绍，vue3创建项目，setup函数，ref和reactive,计算属性监听属性，生命周期，torefs，vue后台管理模板

vue3介绍，vue3创建项目，setup函数，ref和reactive,计算属性监听属性，生命周期，torefs，vue后台管理模板

时间：2023-02-22 18:58:58浏览次数：69  
标签：vue name setup value let vue3 ref 属性

内容回顾

props

不需要再data中定义了，它就在当前组件对象身上了this

props:[]

props:

props:{name:{type:String,default:’123’}}

父子间通信

自定义属性—-props

自定义事件—-$emit(自定义事件，参数)

ref—–this.$refs.名称

localStorage—–浏览器存储（localStorage,Session,cookie）

vuex——状态管理器

mixin混入

抽取代码

插件》使用第三方插件（vue-router,vuex,elementui）

导入

vue.use(elementui)>

内部含有export default {install()

函数内部里面可以自定义指令，全局变量vue.prototype.$name=‘张三’

混入vue.mixin({})

全局组件

vuex:状态管理器，集中式状态管理，存放变量

三个状态：

state:真正存放数据的地方

mutations:修改state的地址 state.变量名，修改即可

actions:可以做判断，与后端交互，调用mutations的地方content.commit

在组件中使用

模板中：{{$store.state.变量名}}

js中：

this.$store.state.变量名 直接使用或修改

this.$store.commit(‘mutations函数’,变量)，调用mutations

this.$store.dispatch(‘actions函数’,变量)正常流程触发actions

vuerouter:完成单页面应用路由跳转的效果

基本使用，router>index.js>routers,加对象{}，加入路径后，访问这个路径就显示指定的组件

跳转不同页面

js控制跳转 this.$router.push(‘路径’) 可以写个对象

标签控制 <router-link to='路径'>也可以写对象

跳转到别的页面传参数

方式1

传值：?name=‘张三’&age=’18’

取值：this.$route.query.name

方式2

传值：/login/2 index.js中配置路由/login/:id

取值：this.$route.params.id

路由守卫

全局路由守卫

前置路由守卫

后置路由守卫

前置路由守卫

router.beforeEach((to, from, next) => {
// 1 取出cookie中token
//2 判断如果不是login页面，from对象，就是路由对象，判断一下，如果是，next()
// 3 如果不是，判断token的值是否为空，如果为空，弹窗，跳转到login
// router.push({name: 'login', params: {id: 99}})
// router.push('/login/88')
next({name:'login',params:{id:33}})
})

localStorage,浏览器存储系列

localStorage, 使用localStorage.setitem,getitem…

sessionStorage,使用sessionStorage.setitem,getitem….

cookie,使用需要借助第三方插件vue-cookies

安装后再main.js中使用插件vue.user(cookies)

使用：cookies.set,get,remove…..

内容详细

vue3介绍

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

新的内置组件

Frament

Teleport

Suspense

其他改变

新的生命周期钩子

data 选项用始终被声明为一个函数

移除keyCode支持作为v-on的修饰符

组合式API和配置项API

vue2：配置项

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

vue3:组合式API

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

vue3创建项目

使用vue-cli

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

创建完成，同样的打开和运行方式

如果elementui有问题无法显示，就把node_models删掉重新cnpm install一下即可

vite创建项目

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

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

使用步骤

安装：npm init vue@latest

按需选择，vueRouter

在项目中执行cnpm install 把依赖装好即可

运行npm run dev(这个名字自己可以改，在package.json中修改即可)

vueRouter跟之前一样

pinia:用来途欢vuex的，新一代的状态管理器

链式调用

为什么这么快

创建项目快》不安装第三方依赖

执行项目，热更新》按需编译（第一次进入会慢）

setup函数

vue2的创建vue实例和vue3创建vue实例的区别

new Vue() >是vue的实例，里面有\(store,\)refs….

createApp(App)>是个对象，对象里面有东西，没有$store,

$refs…有用，都是导入后然后使用

以后vue3的<template>,不需要写一个标签包起来其他标签了

以后都在setup函数中，定义变量，定义函数，一定要 return 在template中才能使用

但是失去了响应式

image-20230222163745829

ref和reactive

有响应式

以后定义变量，如果想有响应式就用ref包裹起来，在修改变变量，需要用 变量名.value 修改

配置项api和组合式api可以混写，不建议

在data中定义的变量

在setup中定义变量

总结：

在setup中定义变量和函数，在之前配置项api中可以直接使用this.变量，函数调用即可

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

不同类型做响应式

ref通常用来包裹，数字，字符串类型，以后使用xx.value

<template>
  <div class="home">
    <h1>名字--》{{ name }}</h1>
    <button @click="add">点我名字加?号</button>

  </div>
</template>

<script>
import {ref} from 'vue'

export default {
  setup(vue) {
    console.log(vue)
    let name = ref('张三')
    let add = () => {
      name.value = name.value + '?'
      console.log(name.value)
    }
    return {
      name, add
    }
  }
}
</script>

这样就实现了动态响应

image-20230222165306851

reactive用来包裹数组和对象类型 以后使用直接使用即可xx.变量名

<template>
  <div class="home">
    <h1>名字--》{{ name }}</h1>
    <button @click="add">点我名字加?号</button>
    <h1>名字{{ user.username }}---》年龄{{ user.age }}</h1>
    <button @click="addAge">点我增加年龄</button>
  </div>
</template>

<script>
import {ref, reactive} from 'vue'

export default {
  setup(vue) {
    console.log(vue)
    let name = ref('张三')

    let user = reactive({
      username: '老刘',
      age: 18
    });

    let addAge = () => {
      user.age++
      console.log('年龄增加了现在，现在年龄',user.age)
    }


    let add = () => {
      name.value = name.value + '?'
      console.log(name.value)
    }


    return {
      name, add, user, addAge
    }
  }
}
</script>

image-20230222165856059

总结

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

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

计算属性和监听属性

计算属性

computed的配置项中的写法，不建议用了
computed:{
    fullName(){
        return this.firstName+this.lastName
    }
},
vue3新写法
    <p>查看个人信息{{ userinfo }}</p>

import {ref, reactive, computed} from 'vue'
//计算属性

let user = reactive({
    username: '老刘',
    age: 18
});

let userinfo = computed(() => {
    return `用户名${user.username}:用户年龄${user.age}`
});

image-20230222174023606

计算属性取值和修改值
<h1>计算属性修改</h1>
姓 <input type="text" v-model="user.firstname">
<br>
名 <input type="text" v-model="user.lastname">
<br>
全名：{{ fulluser }}
<br>
<input type="text" v-model="fulluser">





//计算属性修改值
let fulluser = computed({
    get() {
        return user.firstname + user.lastname
    },

    set(value) {
        console.log(value)
        user.firstname = value.slice(0,1)
        user.lastname = value.slice(1)
    }


})

image-20230222175232324

监听属性

组合式api写法，只要name发生变化，就会触发匿名函数执行

let name = ref('lqz')
watch(name, (newName, oldName) => {
    console.log('name变了')
    console.log('老的', oldName)
    console.log('新的', newName)
})

image-20230222180524603

watchEffect用法，只要age变化，就会执行，age不变化，就不会执行

只要watchEffect里面使用到了变量发生改变了，就会触发

let name = ref('张三')

watchEffect(() => {

    console.log(name.value)
})

image-20230222180813237

生命周期

vue3的变化，不推荐使用了

vue2 | vue3

beforeCreate=======>beforeCreate

created==============>created

beforeMount =======>beforeMount

mounted=======>mounted

beforeUpdate=======>beforeUpdate

updated ===========>updated

beforeDestroy=======>beforeUnmount

destroy==============>unmount

不推荐用这个用写法了，配置项写法，统统写在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
})




setup(vue) {
    let name = ref('张三')

    onMounted(() => {
        console.log('开始渲染')
    })
}

toRefs

以后setup的返回值可以直接使用

以后在模板中直接使用{{username}}{{gender}}

<template>
  <div class="home">
    <h1>监听属性</h1>
    <input type="text" v-model="name"> ------{{ name }}
    <h1>toRefs</h1>
    <p>{{ username }}----->{{ gender }}</p>
  </div>
</template>

<script>
import {onMounted, ref, reactive, watch, watchEffect, toRefs} from 'vue'

export default {
  setup(vue) {
    let name = ref('张三')
    let userinfo = reactive({
      username: '张三',
      gender: '男',
    });
    onMounted(() => {
      console.log('开始渲染')
    })
    // toRefs要包裹对象，最好是reactive包裹过的对象
    return {...toRefs(userinfo), name}
  }
}
</script>

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代码没问题

vue后台管理模板

公司内部项目，会写后台管理，往上有很多vue开源的后台管理的框架，我们只需要在上面做二次开发

django-vue-admin 前端–》D2Admin

若依：vue前端 用了 vue-element-admin

eladmin前端 drf 写了基于rbac权限管理的框架

https://gitee.com/liuqingzheng/vue_admin

标签：vue,name,setup,value,let,vue3,ref,属性
From： https://www.cnblogs.com/clever-cat/p/17145488.html

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99