精华内容
下载资源
问答
  • 就一直牵动着前端开发工程师的神经,大家对于这新版本也是翘首期盼,我今年年初就持续关注,因为我要做一门和 vue3.0 相关的课程,我在 vue-next 的 repo 下面每天刷提交的 commits,alpha 0 一直刷了 ...

    Vue3 自从宣布以来,就一直牵动着前端开发工程师的神经,大家对于这个新版本也是翘首期盼,我从今年年初就持续关注,因为我要做一门和 vue3.0 相关的课程,我在 vue-next 的 repo 下面每天刷提交的 commits,从alpha 0 一直刷到了 alpha14,就在5天前,beta版终于来了!这是一个里程碑一样的时刻,这就代表到现在为止,我们可以真正的开始搞起了。这个视频呢,分为两个部分 首先和大家一起来盘点一下 vue3 的新特性 ,然后呢带大家一起来用vue3 写一个简单的例子, 探索一下它最新推出的 compositon API!让我们开始吧!

    我强烈推荐大家看视频,不过视频的文字版本都在下面。想看文字版也没问题!

    新特性

    首先说说 Beta 对于真正到最后稳定版,为什么是是一个里程碑的时刻,首先要让我们从Evan You的 plan 说起。这是他在 2018年宣布推出 vue3 时候的一篇文章。

    medium.com/the-vue-poin

    945e1c28332bf0585efa8dd5a83c1fc9.png

    我们可以看到这是他推出 vue3 的一个roadmap,alpha 算是最后的开发阶段,在 alpha 中要处理 compiler 和 server-side renderer,还有就是小范围测试,到 beta 就是说主要功能都开发完毕,主要处理第三方工作的升级,适配 3.0 的升级,接下来就是 RC phase,code freeze,不能再提交新的代码,IE11 build,到最后的 final release。

    大家可以在 vue-next 看到进行的情况,我们可以看到大多数第三方工具已经是 alpha 版本,所以说它们的支持最终 release 也是指日可待了。

    好,那么现在来盘点一下它的6大改变。

    c4c4d19b9e69ce53d4931bbc6c15d222.png
    • Performance:性能更比Vue 2.0强。

    这个细节我们就不展开讲了,反正就是比 2.0 更快,这点对API 没有影响。

    • Tree shaking support:可以将无用模块“剪辑”,仅打包需要的。

    支持 Tree shaking,这是 webpack,rollup 这些打包工具提出的概念,就像摇一棵树一样,枯黄的叶子都被摇下来,这样可以将无用的代码都扫除掉。也是一个优化措施。

    • Composition API:组合API

    我认为它是 vue3 最大的改变,也是内容最多的,他目的是以实现更灵活且无副作用的复用代码。我们后面会给大家演示它的冰山一角。

    • Fragment, Teleport, Suspense:“碎片”,Teleport即Protal传送门,“悬念”

    这三个特性可以是说取他山之石,都是React 已经有的概念。模版不再限于单节点,Teleport 其实就是 React.Portal 用于把组件渲染于另外一个 DOM 节点上, Suspense ,React 到现在也是实验性质,它可以包裹组件让它们简易的实现一种异步等待处理。

    • Better TypeScript support:更优秀的Ts支持

    Typescript 在 2019年大获成功,越来越多的框架都采用它编写,vue3 全盘使用 typescript,可以享受t s 的红利。

    • Custom Renderer API:暴露了自定义渲染API

    这个意味着以后可以通过 vue, Dom 编程的方式来进行 webgl 编程。

    好,这些特性大家可以在 rfcs 这个 repo(github.com/vuejs/rfcs/t) 中找到,RFC 意思是 request for comments,就是讨论问题中的请求意见稿,active 值得就是已经讨论通过并且正在实施的特性,其实这里面就是特性的文档,而且写的非常的详细,大家没事可以点进来看看,看看官方文档是怎么说的。

    安装并且简单上手

    好,那么下一步我们就来简单把玩一下 vue3,学习一个最简单的composition API,现在安装他已经是非常简单。

    我们还是使用官方的 vue-cli 创建一个新的项目,

    vue create vue3-test

    这是一个 vue2 的项目,我们现在只需要给 vue-cli 多安装一个插件,就可以感受 vue3了,github.com/vuejs/vue-cl

    vue add vue-next

    这个插件现在还不支持 typescript,所以我们这个小例子还是用 javascript 书写,来感受一下最多的特性改变 - composition API,这里不会介绍为什么会有 composition API,只是直接使用它,但是从它的名称大家可以看出一些端倪,composition 是组合的意思,也就是说采用这个 API 更适合逻辑代码的抽离和组合,大家都知道现在 vue2 的代码逻辑重用是有一些弊端的,mixin 和 mixin factory 都有不爽的地方,composition 是为了解决这一问题的。大家可以在这里找到更多的前因后果:github.com/vuejs/rfcs/b

    让我们回到代码。我们先写一个vue2 的简单例子。

    <template>
    <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>{{count}}</h1>
    </div>
    </template>


    <script>


    export default {
    name: 'App',
    data() {
    return {
    count: 0
    }
    }
    }
    </script

    我们用 vue3 来改写它,大家都知道 vue 最引以为傲的是它的 reactive 特性,也就是响应式,现在 vue3 的 composition API 响应式采取了新的实现方式,我们可以删除 data 方法,而使用 setup 方法,在 setup 方法中,我们可以创建使用新的 api 创建响应式的实例。

    export default {
    name: 'App',
    setup() {
    const count = ref(0)
    return {
    count
    }
    }
    }

    然后我们来修改这个响应式的值,原来大家知道都要写在 methods 里面,现在我们可以直接在 setup 中创建函数, 然后返回,我们现在来实现点击 logo 让数字加一

      import { ref } from 'vue'
    ...
    setup() {
    const count = ref(0)
    const addCount = () => {
    count.value++
    }
    return {
    count,
    addCount
    }
    }

    特别注意当改变一个 响应式对象值的时候,我们需要改变的这个对象的 value 值,也就是代码中的 count.value, 而在模版中使用的时候,我们可以省略掉 value,这是模版引擎编译的时候替我们做的事情。

    接下来添加一个 computed property,在 vue2 中,都是采用单独的字段,现在都可以直接在 setup 中完成了。

      import { ref, computed } from 'vue'
    ...
    setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)
    const addCount = () => {
    count.value++
    }
    return {
    count,
    addCount,
    double
    }
    }

    还有一个新的提升大家注意 , 在 vue2 中响应式是有局限的,比如文档中说的cn.vuejs.org/v2/guide/r

    var vm = new Vue({
    data: {
    items: ['a', 'b', 'c']
    }
    })
    vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的

    但是 vue3 采用了 Proxy 代替了原来的 Object setter getter 的形式,现在这些都支持了,很完美,让我们来试一试

    // 添加一个响应式数组和修改方法    const arr = ref(['1','2','3'])
    const modify = () => {
    arr.value[0] = '5'
    }
    //添加模版 <ul>
    <li v-for="item in arr" :key="item">{{item}}</li>
    </ul>
    <button @click="modify">Modify</button>

    现在点击modify, 第一项就可以改变了,非常方便。

    好,那么今天对于 Vue3 特性的上手就先到这里,我知道大家肯定还没过瘾,可以自己去研究 rfc 文档,有非常多的好东东等着你探索,我最近也在慕课网做 vue3 和 typescript 相关的课程,(imooc.com/t/6012904/) 欢迎大家关注学习!

    如果你想接受推送,欢迎关注我的公众号。

    a216da81373fccdad8e95a8b68d66b2d.png
    展开全文
  • 这是一个有助于创建Vue.js应用程序的组件,无需使用易用的webpack或类似组件。 所有资产(js,css和模板)都直接注入html中,并且此组件提供了拆分代码(js,css和模板)并html根元素加载参数的功能。 此组件...
  • 参考了挺多资料,最后找到了一个大佬写的一篇文章,参照他的修改了一下 其中有一些改动在这里记录一下: 单页面应用,滚动距离老是零,改为document.documentElement.scrollTop可行

    参考了挺多资料,最后找到了一个大佬写的一篇文章,参照他的修改了一下
    其中有一些改动在这里记录一下:
    在这里插入图片描述在这里插入图片描述
    单页面应用,滚动距离老是零,改为document.documentElement.scrollTop可行
    链接地址:https://www.jianshu.com/p/f343c093f370

    展开全文
  • 当我们在写单页应用的时候,前端路由采用vue-router实现,如果页面A跳到页面B,然后点浏览器返回,返回到页面A时,页面会刷新。最近遇到一个需求,一个列表页,用户会根据条件进行筛选,也可以翻页,当用户筛选后...

    vue,vue-router实现浏览器返回不刷新页面
    当我们在写单页应用的时候,前端路由采用vue-router实现,如果从页面A跳到页面B,然后点浏览器返回,返回到页面A时,页面会刷新。最近遇到一个需求,一个列表页,用户会根据条件进行筛选,也可以翻页,当用户筛选后点击具体的某一个条目时,进入详情页查看编辑详情,用户点击返回时,希望之前页面的筛选条件也能够保留。查找相关资料,vue中有个keep-alive组件可以对组件进行缓存,这样当页面返回时就不会刷新页面。

    <keep-alive>
        <router-view></router-view>
    </keep-alive>
    

    但是直接keep-alive是强缓存,如果在详情页对于该内容做了修改,希望在列表页的描述中能够体现出来,这个时候希望可以动态的控制页面的缓存与否,这个时候结合vue-router去实现,这时候需要对页面的一些写法进行改造,具体实现步骤:

    1、页面路由的写法,其中$route.meta.keepAlive=true则页面路由放置在keep-alive组件中,表示需要缓存,否则不缓存,这里就可以通过控制meta中的keepAlive属性来控制router-view中的页面需不需要缓存了。

    <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    

    2、我们从列表页A跳转到详情页B时,可以在url是带上特殊字段,A页面在进行跳转的时候在需要跳转到的详情页url上加上过滤的数据,用来保存筛选条件。

    1
    2
    //将筛选条件作为url的参数
    let filterParams = {filterA: ‘’, filterB: ‘’}
    this.$router.push(path+’?backparams=’+JSON.stringify(filterParams))
    3、详情页中的相关配置,再由详情页跳转走时,会首先执行beforeRouteLeave方法,在页面上通过设置reload参数来控制跳转到的页面需不需要缓存。

    //to表示将要跳转页面的url,在页面中通过reload参数控制页面跳转到的页面是否需要缓存

    beforeRouteLeave (to, from, next){
        to.meta.keepAlive = true;
        if(this.reload){
        to.meta.keepAlive = false;
        }
        next();
    }
    

    4、列表页中的判断。如果页面组件缓存后,不会执行vue对象中的beforeMount方法,如果没有缓存我们也可以通过url上带的过滤参数,在页面加载前把过滤的数据赋值,从而实现页面筛选条件保留而且页面刷新跟新列表条目的数据。

    let fromparams = '';
    //vue对象中
    beforeRouteEnter (to, from, next){
            if(from.query.backparams){
                fromparams = from.query.backparams;
            }
            next();
    }
    beforeMount (){
            if(fromparams.length>0){
                let params = JSON.parse(fromparams);
                //将url上带回的参数赋值给vue中的data对象,从而实现条件的带回
                this.date  = params.date;
                this.status = params.status
                this.page = params.page;
                ......
            }
    }    
    

    如果多个列表对应一个详情页时,可以在url上带上某个具体页面的标识参数,这样就可以控制某个具体页面的缓存。这种设置非常的灵活,可以动态的控制页面的缓存与否。

    补充:

    //页面写法1



     
    //修改为写法2

    如果通过在url上带参数的方法,可以直接去掉组件,因为写法1有两个router-view,当我们修改详情页B,然后跳到列表页A,A页面不缓存组件,且刷新了列表,但是两个router-view导致keep-alive组件包裹的view页面并没有刷新还是老的状态页面,这时我们再点击列表页查看其它的详情页,再点返回时,这个时候列表页用的是带有keep-alive缓存的页面,列表页中之前我们改的详情页的状态字段并没有在缓存的列表页刷新,显示的还是老的状态,所以我们就彻底废弃掉vue提供的keep-Alive缓存组件,自己实现控制返回带入之前筛选的条件,给用户一种没有刷新的体验。

    如果页面只是,没有写的操作,那么可以直接用keep-alive写法1来实现页面缓存且不需要带backparams参数。

    展开全文
  • 我们在vue开发中经常会碰到种需求, 返回页面后需要定位到滚动条指定位置, 以增强用于体验. 比如在a页面,它是列表, a页面是不做分页的. 最常见的就是小说类网站的目录页.... 再b返回到a时, a...

          我们在vue开发中经常会碰到一种需求, 返回页面后需要定位到滚动条指定位置, 以增强用于体验. 比如在a页面,它是个列表, a页面是不做分页的. 最常见的就是小说类网站的目录页. 或者后台类网站列表 包含查看更多按钮这种的. 也就是说这种页面我们想观看更多内容, 不然出现滚动条. 但因为vue是单页应用, 当我们点击其中一条数据, 进入b页面. a页面就销毁了. 再从b返回到a时, a页面会重新加载, 导致用户需要重新手动定位点进去的位置. 很麻烦. 最近实践了几种方法, 现在和大家分享一下:

         1.  a传递参数到b   ->  从b返回时回传参数  ->   a拿到参数循环列表找到具体位置  ->  定位位置

         2.  a跳转到b时记下scrollTop -> b返回时直接定位scrollTop

     

    第一种分析:   

               听起来挺简单的, 但要结合到具体场景, 还是要做一些思考的. 比如你的需求是从小说的目录页到阅读页  阅读页再返回时需要定位章节位置, 且当前章节文字变色 加粗. 这样就只能用第一种方法. 因为一般网站在阅读页可以操作上一章和下一章. 所以这时候你如果记下目录页的scrollTop是没有意义的.因为章节是实时变化的, 并且要操作dom. 所以只能用第一种;这里拿小说类网页举例说明; a页面跳转到b的时候传递章节名称到b, 这时候如果从b反回到a了. 直接循环列表找到当前章节并定位.  但如果用户在阅读页操作上一章或者下一章了;这时候要把当前的目录的名称同步push到url;否则返回的章节名称就不准确了;这个时候需要注意一个小的问题.不要在created里操作定位;是操作不了的.mounted的时候才可以操作;

    第二种分析:

               第二种方法适合后台类的管理系统, 从列表页进入详情页这种场景. 比如列表页没有分页, 采用的查看更多去查看更多内容.这个时候只要点击列表就先记下scrollTop; 进入b页面后再返回直接定位scrollTop就可以了; 但这种场景结合缓存实现比较好.因为b返回a后还得发送请求, 这个时候你要想定位的话, 又牵扯到page和pageSize. 因为用户很可能点击了好几次查看更多; 或者你还得传递page和pageSize到b; 这样实现起来比较麻烦; 建议采用缓存的方式; 这些小项目其实不太建议上vuex; 直接建一个js模块;a跳转的时候把data和scrollTop存到这个js模块中; 然后b返回a后再a页面判断是不是返回了, 如果返回了, 就从js模块中取data渲染并定位scrollTop; 否则不是返回的话就执行默认请求ajax的操作;  但这种方法也有个缺陷, 用户如果在b刷新页面了, js模块中的数据和scrollTop就不存在了;  你如果非常介意这个问题的话, 也可以使用localStorage存储; 但用本地存储我也做了研究, 也有几个小问题,就是你需要clearStorage; 这个时候又要判断用户是刷新了还是真的关闭页面;  另外, 毕竟内存比磁盘的读取速度快多了; 综合考量下, 领导决定用全局data方式这种;

     

    最近开发实在太忙了; 写的比较少了; 没办法, 得挣钱啊; 这次也没配图; 简单说说; 有任何疑问都可以留言; 我都会回复答;

    因为我们公司是小说类产品的, 所以对小说类很熟悉; 整个的移动端网站是我做的; 以后有时间再好好说说小说阅读器的做法和注意事项;

        

    展开全文
  • 零开始vue 测试实践

    2018-05-01 12:57:38
    概览实践目标单元测试实现:对用户接口进行测试,登录,获取用户信息,更新用户信息, 登出 ,各接口返回200状态码,即...脚手架开始 ——vue-cli: unit 选项中默认第一个就是Jest,直接回车键选中。脚手架后的...
  • vue keep-alive应用场景及如何使用

    千次阅读 2020-07-16 17:45:56
    在开发中经常有列表跳详情页,然后返回详情页的时候需要缓存列表页的原来数据以及滚动位置,这时候就需要保存状态,要缓存状态。概括来讲: 1、列表页面 ——进入详情页 —— 后退列表页(缓存列表页的原来...
  • 一个文章记录了 如何解决使用Hbuilderx打包Vue项目为安卓APP点击物理返回键直接退出应用问题,这篇文章记录一下让某个页面禁用物理返回按钮的问题 问题描述 上次解决了返回按钮,但是在登录成功之后还是可以返回到...
  • 最好您的<code>action中返回一个<code>promise</code>,以便对AJAX请求的解析做出反应,例如隐藏加载微调器,重新启用按钮等。 <pre><code>js store = new Vuex.Store({ state: { ...
  • Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制目标对象。它将返回目标对象。 var a1 = { a: 1 }; var b2 = { b: 2 }; var c3 = { c: 3 }; var obj = Object.assign(a1, b2, c3); console....
  • vue单页应用页面缓存方案----纯干货

    万次阅读 2018-04-19 14:48:24
    场景是这样的,我们的产品首页是一个列表,当用户滚动距离顶部一定的距离,然后点击列表项进入详情再返回的时候列表数据重新加载,且滚动了顶部,这简直是一个不能忍受的事情。于是准备对我们的项目体验进行优化...
  • Object.assign及在Vue中的应用小技巧

    万次阅读 2018-08-14 11:40:13
    Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制目标对象。它将返回目标对象。 // 目标对象有1个,后边可以有多个源对象。注意他只会拷贝源对象自身且是可枚举的属性目标对象。该方法...
  • 钉钉应用一个非常好的特性:当我们配置的首页地址是局域网地址,手机连接在局域网,钉钉是能够访问应用的。 1.获得相应企业管理员权限 2.登陆钉钉开发后台,根据钉钉图文创建应用,创建成功后,可以获取appkey...
  • 典型的应用场景就是:前端菜单不静态的写在vue程序里,而是要后台程序和数据库返回的菜单来动态加载到vue应用中。 网上很多问权限的问题,但几乎找不到很好的解决答案,在很长段时间里,非常打击使用vue技术栈...
  • vue-router动态加载路由

    千次阅读 2018-10-10 10:05:33
    场景:前端菜单不是静态的写在vue程序里,而是要后台接口中获取的的菜单列表 来 动态加载到vue应用中 思路:1、登录成功的同时后台会返回给我们菜单列表,此时我们便在vue-router中插入这菜单所对应的路由配置 ...
  • 在电商项目当中,都会有购物车的功能,购物车一般都有,加入购物车并保存本地(localStorage)、本地把数据取出来并渲染页面、点击复选框(商品前面...Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 V.
  • 典型的应用场景就是:前端菜单不静态的写在vue程序里,而是要后台程序和数据库返回的菜单来动态加载到vue应用中。 网上很多问权限的问题,但几乎找不到很好的解决答案,在很长段时间里,非常打击...
  • 如果未登录后端会返回一个错误码</li><li>如果后端返回一个未登录的错误码,前端需要跳转公司统一的登陆中心去登陆,登陆成功后会跳转回当前地址并在url上携带sid</li><li>监听所有路由,如果...
  • keep-alive在vue-router中的使用

    千次阅读 2018-04-19 11:57:54
    在使用基于Vue的单页面富应用的开发中,总会面向这样的产品需求,既列表页跳转详情页面,返回时需要保存列表页的状态。 这种场景下,若是讲数据写入全局状态中,总会面临复杂的页面路由判断来清楚和存储页面...
  • 之前开发了一个单页面应用,按照深度,分为三层:目录页、一级子页(标签页、故事页等)、二级子页(故事编辑页)。 这三类页面都共享一个完整的数据model,上级页面进入下一级页面时,能够加载相应数据;回到上一...
  • 计算属性在vue中也是一个非常常用的功能,而且好多同学搞不清楚它跟watch有什么区别,这里就详细说说计算属性到底是什么,以及它是如何工作的 简单点说,<code>Computed</code> 其实就是...
  • 应用场景:列表页跳转详情页面,然后详情页返回列表页的时候,列表页的数据不刷新,但是其他页面进行跳转列表页的时候,列表页的数据刷新。 简单来说,是一个前进刷新,后退不刷新的功能。 keep-alive是...
  • 单页应用不重新渲染组件问题:组件在初次渲染后不会重新渲染,此时当某个路径返回到此组件对应的路径时,不会执行created或者mounted,也就不会发请求获取新数据。解决方法是监听$route。代码示例:  watch: { ...
  • -Vue.js(通常称为Vue)是一个用于构建用户界面的开源渐进式JavaScript框架。 -React(通常写为React.js或ReactJS)是一个构建用户界面的JavaScript函式庫。它由Facebook、Instagram和个人开发者以及企业社区维护。...
  • 通常返回该客户端的就是一个HTML文本。我们每次的请求:获取的数据、内容的加载,都是服务器为我们返回染完成之后的 DOM,这也就使得我们开发网站的灵活度大打折扣,在这种情况下,...
  • wl-micro-frontends [wl-qiankun] ... alert('父应用返回信息:' + data); }, ], }; // 注册子应用 registerMicroApps([ { name: 'app1', entry: '//localhost:7771', render, activeRule: genActiveRule('/app...

空空如也

空空如也

1 2 3
收藏数 52
精华内容 20
关键字:

从一个应用返回到vue

vue 订阅