vue3.0总结

Posted 2021-12-17 oomsday

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”

7. Readonly，该方法接收传入一个对象，默认是只读功能，是深层对象只读，不管嵌套多少层的属性都是只读状态。
8. 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)


如果要监听哪个值，需要在该函数里写出来，否则监听无效；

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

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;