zoukankan      html  css  js  c++  java
  • vue2.0填坑有感(持续更新ing)

    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、(dispatch、)broadcast,官方推荐使用vuex或者全局的事件驱动,然而废弃的这些方法在vux UI框架中很多地方都有使用,无疑在项目中用到它的地方在2.0版本都会不起作用,甚至会报错。

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

    例如

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

    4.(els 是用来获取元素DOM对象,这个也废弃不用,)refs可以起到替代性作用。

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

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

    7.新增 v-once指令

    8.新增 propsData

    9.新增 render

  • 相关阅读:
    智能指针的理解
    [转] weak_ptr解决shared_ptr环状引用所引起的内存泄漏
    模板实现多态的功能
    Protobuf的自动反射消息类型的方法
    [转] C++临时变量的生命周期
    C++转换函数
    [转] boost------ref的使用(Boost程序库完全开发指南)读书笔记
    c++回调编程本质
    New 和 GetMem 的不同之处
    Delphi New,Getmem,ReallocMem联系与区别
  • 原文地址:https://www.cnblogs.com/Yfling/p/6818700.html
Copyright © 2011-2022 走看看