• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vue3.0总结

互联网 diligentman 2小时前 4次浏览

vue3.0实际项目经历

  • 学习了两个月的vue3.0总结
    • 组合式API
    • 更快的性能
    • Provide && Inject
    • 生命周期
    • 创建的三种方式
    • 过滤器的移除
    • keep-alive
    • vue-router
    • vuex

学习了两个月的vue3.0总结

目前自学前端1年,自学vue2.0到vue3.0,第一次发博客总结了下ximd,今天尝试写一下博客,有什么不对的希望大家能帮忙指出。

组合式API

个人觉得vue3.0最大亮点就是setup,写起来和vue2.0感觉完全不同,现在来看看吧:

  1. setup ,创建组件实例,然后初始化props,紧接着就调用setup函数。 从生命周期的角度来看,它会在beforeCreate之前执行。也就是创建组件先执行setup、beforeCreate、create,由于不能在setup函数中使用data、methods,为了避免使用Vue出错,所以把setup函数中this修改为了undefined,其中包含props与context,props: 用来接收 props 数据,context 用来定义上下文, 上下文对象中包含了一些有用的属性,这些属性在 vue 2.x 中需要通过 this 才能访问到, 在 setup() 函数中无法访问到 this,是个 undefined,setup中还需要返回值return。
  2. Reactive该方法接收一个参数{}创建一个响应式对象。跟Vue2.x的Vue.observable一样。如果该参数不是对象的话,也可以渲染到模板上,但不是响应式的数据。
  3. toRefs,toRefs() 函数可以将 reactive() 创建出来的响应式对象,转换为普通的对象,只不过,这个对象上的每个属性节点,都是 ref() 类型的响应式数据。
  4. Ref该方法接收一个参数,可以是单个值,也可以是一个对象,并且都是响应式的数据。当传入一个对象时{},内部将调用reactive方法进行转换为响应式数据。返回值里面带有.value属性取值,当使用模板渲染的时候可省去.value。
  5. isRef,isRef() 用来判断某个值是否为 ref() 创建出来的对象;
  6. Computed,该方法可以传入一个函数,默认该函数就是getter,不管getter返回值为一个ref响应式数据还是一个普通变量,数据都是只读不能改变,如下代码片段:

import { ref, computed } from “vue”
export default {
name: ‘test’,
setup() {
let name = ref(“999”)
let test = computed({
get() {
return name.value;
},
set(val) {
return name.value = val;
}
});
test.value = “123”
}
}

  1. Readonly,该方法接收传入一个对象,默认是只读功能,是深层对象只读,不管嵌套多少层的属性都是只读状态
  2. WatchEffect,该方法接收一个函数并且立即执行,并当该函数里的变量变更时,重新执行该函数。该方法无法获取到原值,只能是改变之后的值,如果需要取消监听则要执行watchEffect的返回值

import { ref, watchEffect } from “vue”
export default {
name: ‘test’,
setup() {
let name = ref(“冯哥哥”);
let age = ref(123);
let stop = watchEffect(() => {
name.value; // 监听name
age.value; // 监听age
console.log(name.value)
console.log(age.value)
})
setTimeout(() => {
name.value = “冯哥哥掉马桶里”
}, 5000)
setTimeout(() => {
age.value =321 ;
setTimeout(stop, 300)
}, 1000)
}
}
如果要监听哪个值,需要在该函数里写出来,否则监听无效;

  1. Watch,watch等同于Vue2.x中的this.$watch,watch需要监听特定数据,默认情况是懒执行,也就是只有当数据发生变化时才执行第二个参数函数,对比WatchEffectwatch为懒执行函;更明确哪些状态改变触发监听器;可以监听获取到变化前后的值

watch(name,(newVal, oldVal) => {
console.log(newVal, oldVal)
})
监听多个值时
watch([name, age], (newVal, oldVal) => {
console.log(newVal, oldVal)
})

更快的性能

1.diff算法,3.0 新增加了静态标记(PatchFlag), 在与上次虚拟节点进行比较的时候,只对比带patch flag的节点并且可以通过flag的信息得知当前节点要对比的具体内容
2.hoistStatic 静态提升, 3.0 对不参与更新的元素,会做静态提升,只会创建一次,在渲染的时候复用。
3.cacheHandlers 事件侦听器缓存, 默认情况下onClick会被视为动态绑定,所以每次都会去追踪它的变化。
4.ssr,当有大量静态内容时,这些内容会被当做纯字符串推进一个buffer里面即使存在动态的绑定,会通过模板插值嵌入进去,这样会比通过虚拟Dom渲染快很多。
当静态内容大到一定量级的时候,会用createStaticVNode方法在客户端去生成一个static node 这些node,会被直接innerHtml,不需要创建对象,然后根据对象渲染

Provide && Inject

该方法和Vue2.x的 provide、inject一样的。但是Vue3新特性这俩方法只能在setup中使用
Provide:接收2个参数,第一个key值,第二个value值,进行传递
Inject:接收2个参数,第一个是provide的key值,默认第二个参数可选,可以设置默认值(当找不到key值,设置一个默认值)

//app.vue
import test from “./gcy/test”
import { provide, ref } from “vue”
export default {
name: ‘App’,
components: {
test
},
setup() {
let name = ref(“好的吧”)
provide(“name”, name) // 传入一个响应式数据
},
}
// test.vue
import { inject } from “vue”
export default {
name: ‘test’,
setup() {
let name = inject(“gcy”)
console.log(NAME)
let title = inject(“key”, 123)
console.log(title) // 这时就会触发默认值,因为这里找不到这个key值
return {
NAME
}
}
}

生命周期

在Vue3.X也可以在setup函数下使用生命周期,这些钩子函数写法跟之前的生命周期写法不同。

beforeCreate –> setup //创建之前
created –> setup //已创建
beforeMount –> onBeforeMount // 渲染之前
mounted –> onMounted //已渲染
beforeUpdate –> onBeforeUpdate //更新之前
updated –> onUpdated // 已更新
beforeDestroy –> onBeforeUnmount // 摧毁之前
destroyed –> onUnmount //已摧毁
注意:这些生命周期写法只能在setup函数下使用,在其它地方使用则会报错

LifeCycle Hooks(新的生命后期),新版的生命周期函数,可以按需导入到组件中,且只能在 setup() 函数中使用, 但是也可以在setup 外定义, 在 setup 中使用。
使用keep-alive,可以使用onActivated与onDeactivated两个生命周期函数,下面在详细介绍keep-alive的两个生命周期函数。

创建的三种方式

1.webpack

git clone https://github.com/vuejs/vue-next-webpack-preview.git
cd projectName
npm install
npm run dev

2.vue-cli

npm install -g @vue/cli
vue create projectName
cd projectName
vue add Vue-next
npm run serve

3.vite(比webpack更快,vue团队的脚手架)

npm install -g create-vite-app
create-vite-app projectName
npm install
npm run dev

过滤器的移除

过滤器其实还挺好用的~~现在使用computed代替

keep-alive

当在内部切换组件时,将相应地调用其onActivated(缓存激活)和onDeactivated(在组件切换中老组件消失的时候执行)生命周期挂钩

1.路由配置

> const routes = [
  {
    path: '/',
    name: 'home',
    component: home,//路由预加载
    meta: { 
      keepAlive:true, //是否需要缓存
     }
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('@/views/about.vue'),//路由懒加载
    meta: { 
      keepAlive:false, ///是否需要缓存
     }
  }
]

2.组件配置

//app.vue
<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-view v-slot="{ Component }">
      <!-- vue3.0配置 keep-alive缓存-->
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive" />
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive" />
    </router-view>
  </div>
</template>

其中include和exclude,include是绑定需要缓存的组件,并且要和组件名一致;exclude绑定则是不需要缓存的组件。当两个属性同时使用时exclude权重大于include

	<!-- 逗号分隔字符串 -->
    <keep-alive include="home,about" exclude="about">
    	<component :is="Component" />
    </keep-alive>
    <!-- 正则表达式 (使用 `v-bind`) -->
    <keep-alive :include="/home|about/">
    	 <component :is="Component"></component>
    </keep-alive>
    <!-- 数组 (使用 `v-bind`) -->
    <keep-alive :include="['home', 'about']">
    	<component :is="Component"></component>
    </keep-alive>

缓存的最大数值,keep-alive还有一个max属性,代表缓存组件最大数量,一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉

<keep-alive :max="10">
        <component :is="Component"></component>
    </keep-alive>

vue-router

都是我目前项目的基本配置router.js:

import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../views/home.vue";
const routes = [
	{
		path: "/home",
		name: "home",
		component: Home,
	},
	{
		path: "/test",
		name: "Test",
		component: () =>
			import(/* webpackChunkName: "about" */ "../views/Test.vue"),
	},
];

const router = createRouter({
	history: createWebHashHistory(),
	routes,
});

main.js中代码配置项

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";

const app = createApp(App);
app.use(router);//注意顺序
app.mount("#app");

如何引用

import { useRoute, useRouter } from "vue-router";

嵌套路由

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile,
      },
      {
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]

路由的导航守卫

router.beforeEach((to, from, next) => {
  console.log(to, from)
  next()
  //to是路由切换的下一步去哪,from是路由切换来自哪里,next是同意下一步操作,类似于放行路由的切换
})
router.afterEach(() => {
    //后置路由守卫
//初始化的时候被调用,每次路由切换之后被调用
//后置路由守卫没有next
})

路由跳转

 <li><router-link :to="{name: 'login'}">登录</router-link></li> //静态路由跳转
router.push({name: 'home'}) // JS代码的动态路由
router.push({name: 'home',query:{id:ids}}) 
router.push({name: 'home',params:{id:ids}})
//路由传参 在被传参的.vue文件中可以用route接收

vuex

个人理解为状态管理,保存自己需要的状态,比如购物车,分页类似的可以使用vuex或者本地存储

import {createStore} from 'vuex'

const store = createStore({
    state: {
        user:'gcy'
        //state:存储状态(变量)
    },
    getters:{
    //getters:对数据获取之前的再次编译,可以理解为state的计算属性。
    }
    mutations: {
    //mutations:修改状态,并且是同步的。
   SetUser(state,val){
    state.user = val
   }
   },
    actions:{
    //actions:提交 mutation,异步操作
   }
})
// 当然还可以分模块modules 这里我没使用过就不展示出来了
//modules:store的子模块,为了开发大型项目,方便状态管理而使用的,即将store分割为模块,使store对象不会太臃肿。
export default store;


程序员灯塔
转载请注明原文链接:vue3.0总结
喜欢 (0)