Processing math: 100%

vue2.0填坑有感(持续更新ing)

Posted on   风铃同学  阅读(767)  评论(0编辑  收藏  举报

1.请求数据

用本地json数据进行mock的时候,一般放在created 过程就Ok了,这样可以尽早获取数据;如果有依赖dom必须存在的清空,就放到mounted里面,具体用法如下所示:

// created()方法:
    created() {
      this.$http.get('api/goods').then(res => {
         this.goods = res.body.data;
         // console.log(this.goods);
        
      }, res => {
        alert('数据请求失败');
      });
    }

// mounted方法:
  mounted() {
    this.$nextTick(function() {  //一定要有这一步~
      this.View();
    })
  },
  methods: {
    View() {
      this.$http.get('api/seller').then(res => {
        this.seller = res.body.data;
        // console.log(this.seller);
      }, res => {
        alert('数据请求失败');
      });
    }
  }

附上一张vue2.0的官方生命周期图:
vue生命周期

2.methods与computed

才开始填坑的时候其实可以这样想两者的关系:
methods是要用@click来调用的函数,
computed是计算属性,比如一个total(),你可以直接用{{}}来使用total()计算出来的值,比如

{{total}}
。可以把定义在computed里面的计算方法当成一个具体的值,因为最后通过计算得到的也的确是一个值(字符串,数字...)。

其他变化:

1.目前的项目几乎每个页面都用到了1.0的ready钩子函数,然而2.0已废弃不用,进而使用mounted替换,同时还新增了beforeMount、beforeUpdate、updated等,私以为越来越向react看齐了有木有。。

beforeUpdate的作用是在页面初始渲染视图之后,一旦监测到data发生变化,在变化的数据重新渲染视图之前会触发beforeUpdate钩子函数,这也是重新渲染之前最后修改数据的机会

updated的作用则是在data发生变化渲染更新视图之后触发。

2.同时废弃的还有events、dispatchbroadcast,官方推荐使用vuex或者全局的事件驱动,然而废弃的这些方法在vux UI框架中很多地方都有使用,无疑在项目中用到它的地方在2.0版本都会不起作用,甚至会报错。

3.v-ref、v-el 弃用 统一使用ref属性为元素或组件添加标记,然后通过this.$refs获取

例如

获取方法为this.$refs.a 对于自定义组件同样适用

4.elsDOMrefs可以起到替代性作用。

5.v-for循环中常用的indexkey也已不支持使用,trackby被key属性替换。

6.自定义组件中的partial,弃用,这个一直没用到

7.新增 v-once指令

8.新增 propsData

9.新增 render

编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· 开发者新选择:用DeepSeek实现Cursor级智能编程的免费方案
· 【译】.NET 升级助手现在支持升级到集中式包管理
· 独立开发经验谈:如何通过 Docker 让潜在客户快速体验你的系统
· Tinyfox 发生重大改版
点击右上角即可分享
微信分享提示