你准备好迎接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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
vue实现树形菜单效果
Mar 19 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
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正则走开
2008/03/15 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
php实现文件上传基本验证
2020/03/04 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
React实现轮播效果
2020/08/25 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python3图片转换二进制存入mysql
2013/12/06 Python
python多线程用法实例详解
2015/01/15 Python
Python中的作用域规则详解
2015/01/30 Python
Python中获取对象信息的方法
2015/04/27 Python
使用Python对Excel进行读写操作
2017/03/30 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
基于python实现学生管理系统
2018/10/17 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
英文自我鉴定
2013/12/10 职场文书
工程招投标邀请书
2014/01/30 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
党员民主评议总结
2014/10/20 职场文书
交心谈心活动总结
2015/05/11 职场文书
运动会宣传稿100字
2015/07/23 职场文书
高中历史教学反思
2016/02/19 职场文书
Python闭包的定义和使用方法
2022/04/11 Python