你准备好迎接vue3.0了吗


Posted in Javascript onApril 28, 2020

前言

本月21号晚上看了尤大大的直播,感觉vue3.0离我们越来越近了,预计年中正式发布,3.0的改变的确很大,性能提升了很多,很多东西也在靠向react。为了到时可以很快的转入vue3.0的阵营,从现在开始熟悉新的特性是很有必要的。
如果你想在v2.x中使用3.0的内容,可通过以下方式

npm install '@vue/composition-api'

在main.js中引入

import VueCompositionApi from '@vue/composition-api';
Vue.use(VueCompositionApi);

数据的双向绑定

V2.x中的数据双向绑定是通过object的defineProperty方法实现的,通过属性中的get和set方法中进行拦截操作。但是它无法监听数组的改变,除了使用以下几种方法可以:push()、pop()、shift()、unshift()、splice()、sort()、reverse(),如果直接使用index设置数组的某一项时是无法改变的。

V3.x中改用了proxy和Reflect实现双向绑定,它可以从更多方面对对象的变化进行监听,除了set 和 get 外,还提供了apply、setPrototypeOf、getPrototypeOf、deletePrototype、isExtensible、preventExtensions、getOwnPropertyDescriptor 、defineProperty、has、ownKeys、construct方法的监听。

对于proxy的实际应用我将在后期专门来讲解,本期以VU3.0的实践为主

直接上一斤的例子

<template>
  <div>
    <h3>数据绑定</h3>
    <div>
      <el-button @click="clicksingleVal">
        单向绑定 {{singleVal}}
      </el-button>
      <el-button @click="clickdoubleVal">
        双向绑定 {{doubleVal}}
      </el-button>
      <el-button @click="clickstateVal">
        状态绑定 {{stateVal}}
      </el-button>
    </div>
  </div>
</template>
​
​
<script>
import {ref, reactive, toRefs} from '@vue/composition-api'
export default {
  setup(){
    let singleVal = 1
    const doubleVal = ref(1)
    const state = reactive({
      stateVal: 1
    })
    const methods = {
      clicksingleVal(){
        singleVal++
        console.log(singleVal);
      },
      clickdoubleVal(){
        doubleVal.value++
      },
      clickstateVal(){
        state.stateVal++
      },
    }
    return{
      singleVal,
      doubleVal,
      ...toRefs(state),
      ...methods
    }
  }
}
</script>
<style>
</style>

如果你是第一次看到上面的写法可能会有点陌生,这就是在vue3.x中的写法。在v2.x中的data、methods、computed、watch等内容,在v3.x中全部都写在一个叫 setup 的函数中。在里面我们可以任意的定义变量、函数等,最后通过return返回,返回的内容可以在模板中进行使用。
对于绑定的数据在v3.x中进行了更加详细的分类,可以分为以下三种:

  • 单向绑定:var singleVal = 1,数据会变化,但是视图不会更新
  • 单个双向绑定:const doubleVal = ref(1),使用 doubleVal.value 改变
  • 双向绑定:需要使用 reactive ,使用 state.stateVal 改变值

我们来逐个的进行讲解:

  • 单向绑定,听名字就可以知道它并不具有双向绑定的特性或功能,它只会在视图初始化时绑定一次,这个变量即使后面发生了改变,视图也不会更新。可以从控制台看到singleVal 的值的确发生了变化,但界面中始终显示的为1。变量声明的方法和我们平时声明一个变量一样,如:let singleVal = 1,最后在return中返回。
  • 单个双向绑定,每次只能声明一个双向绑定的变量,通过ref函数创建一个包装对象,使它包含一个响应式的属性value。例如上面的const doubleVal = ref(1)。如果要改变它的值,需要改变的是它的属性value上的值,像这样一样doubleVal.value++。
  • 双向绑定,通过reactive创建一个响应式的对象,这样创建的对象并不是一个包装对象,因此不需要使用.value来取值,它等价于 Vue 2.x 的Vue.observable。

你准备好迎接vue3.0了吗

const state = reactive({
  stateVal: 1
})
return {
 ...state
}

对reactive的内容直接进行解构后返回,会导致响应式丢失,需要使用toRefs将reactive对象转为普通对象,这样结果对象上的每个属性都指向原始对象中对应属性的ref引用对象,保证了在使用对象解构或拓展运算符时响应式不会丢失。
对于事件方法,就和声明一个变量一样,在setup中声明,在return返回即可。

计算属性

引入computed方法,返回计算后的值,这里接着使用上面的例子,用total计算上面3个数的总和。

import {computed, ref, reactive, toRefs} from '@vue/composition-api' 
export default {
  setup(){
    ...
    const total = computed(() =>{
      return singleVal + doubleVal.value + state.stateVal
    })
    ...
    return{
      ...,
      total
    }
  }
}

你准备好迎接vue3.0了吗

从演示效果中我们还可以看出一点,单向绑定的数据改变不会触发计算属性方法。

数据监听

同样还是写在setup中,也比较简单,没有什么可讲解的

import {computed, ref, reactive, toRefs, watch} from '@vue/composition-api'
...
watch(() => state.stateVal, (newVal, oldVal ) =>{
  console.log(newVal, oldVal);
})
...

你准备好迎接vue3.0了吗

生命周期

vue3.0中取消了 beforeCreate 和 created 两个周期,因为setup会在这个这个周期前执行,因此你可以在setup中进行你需要的处理。其他的生命周期全部以on开头。

import {
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onBeforeUpdate,
  onDeactivated,
  onUnmounted,
  onUpdated
} from '@vue/composition-api'
export default {
  setup(){
    onBeforeMount(() =>{
      console.log('onBeforeMount');
    })
    onMounted(() =>{
      console.log('onMounted');
    })
    onBeforeUnmount(() =>{
      console.log('onBeforeUnmount');
    })
    onBeforeUpdate(() =>{
      console.log('onBeforeUpdate');
    })
    onDeactivated(() =>{
      console.log('onDeactivated');
    })
    onUnmounted(() =>{
      console.log('onUnmounted');
    })
    onUpdated(() =>{
      console.log('onUpdated');
    })
  }
}

Mixin

vue3.0中使用函数式的API代替原有的mixin,mixin很容易引起命名重合和覆盖引入mixin的页面属性。

在vue3.0中以一个API的形式存在,当你需要时,将其引入。直接看例子

mixin.vue

<template>
  <div>
    <h3>mixins</h3>
    <div>
      <el-input v-model="searchValue" type="text" @change="onSearch"/>
      <div>
        <ul>
          <li v-for="name in names" :key="name.id" v-show="name.show">
            {{name.value}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
​
<script>
import searchName from './searchName.js'
export default {
  setup(){
    let list = [
      {id: 1, value: 'vue', show: true},
      {id: 2, value: 'react', show: true},
      {id: 3, value: 'angular', show: true},
      {id: 4, value: 'elementui', show: true},
      {id: 5, value: 'ant', show: true},
      {id: 6, value: 'javascript', show: true},
      {id: 7, value: 'css', show: true},
    ]
    var {onSearch, names, searchValue} = searchName(list)
    return {
      onSearch,
      names,
      searchValue
    }
  }
}
</script>
<style>
</style>

searchName.js

import {reactive, toRefs} from '@vue/composition-api'
​
export default function searchName(names){
  const state = reactive({
    names: names,
    searchValue: ''
  })
  const onSearch = () => {
    state.names.forEach(name => {
      name.show = name.value.includes(state.searchValue)
    })
  }
  return {
    ...toRefs(state),
    onSearch
  }
}

上面我们将搜索功能独立到一个js文件中。在 searchName.js 中定义了一些属性和方法,这里的属性也是具有响应式的,最后返回这些内容。在组件中,先引入这个js文件,调用searchName方法,传入需要的参数。在该组件中的searchValue和names两个响应式数据并非自身的所有,而是来自searchName.js中,通过下面演示可以看到,他们的确也具有响应式的特性。

你准备好迎接vue3.0了吗

EventBus

  • setup接收两个参数
  • props:等同于V2.x中的 props:{},用于接收父组件传递的参数

ctx:上下文环境。在2.x中的this指向的是全局VUE实例,可以使用this.routerthis.router、this.router、this.commit、this.emit3.0访thisthisundefinedctx.root.emit等方法进行路由的跳转等操作。而在3.0中不能直接访问到this,如果你尝试输出this,你回看到它的值是undefined。但可以通过ctx.root.emit等方法进行路由的跳转等操作。而在3.0中不能直接访问到this,如果你尝试输出this,你回看到它的值是undefined。但可以通过ctx.root.root.$emit将内容挂在到 $root 上,以使得任何地方都可以访问到。

setup(props, ctx){
 ...
 const total = computed(() =>{
   let total = singleVal + doubleVal.value + state.stateVal
   ctx.root.$root.$emit('handleClick', {number: total })
   return total 
 })
 ...
}
...
ctx.root.$root.$on('handleClick', (val) =>{
  console.log('我是通过ctx.root.$root.$on触发的,接收的值为:' + val.number);
  state.otherTotal = val.number
})
...

最后附上composition-api的github:https://github.com/vuejs/composition-api

到此这篇关于你准备好迎接vue3.0了吗的文章就介绍到这了,更多相关vue3.0内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 #Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 #Javascript
JS求解两数之和算法详解
Apr 28 #Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 #jQuery
uni-app如何页面传参数的几种方法总结
Apr 28 #Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 #Javascript
JS 创建对象的模式实例小结
Apr 28 #Javascript
You might like
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
jQuery 解析xml文件
2009/08/09 Javascript
js 内存释放问题
2010/04/25 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
Vue中全局变量的定义和使用
2019/06/05 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
原生js实现日历效果
2020/03/02 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
python相似模块用例
2016/03/04 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
python遍历路径破解表单的示例
2020/11/21 Python
PHP如何与mysql建立链接
2013/05/05 面试题
应届生程序员求职信
2013/11/05 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
办理暂住证介绍信
2014/01/11 职场文书
留学推荐信怎么写
2014/01/25 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android