对vue里函数的调用顺序介绍

method用来定义方法的,比如你@click=”test”,methods就定义test这个方法

created和ready都是 vue 组件的生命周期

created

类型： Function

详细：

在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。但是还没有开始 DOM 编译，$el 还不存在。

ready

类型： Function

详细：

在编译结束和 el第一次插入文档之后调用，如在第一次attached钩子之后调用。注意必须是由Vue插入（如vm.el第一次插入文档之后调用，如在第一次attached钩子之后调用。注意必须是由Vue插入（如vm.appendTo() 等方法或指令更新）才触发 ready 钩子。

compted 是计算属性,比如

computed:{
b:function(){
return this.a+1
}
}

那么这个b的值就和a挂钩,始终等于a的值+1,修改a的值的时候也会变

vue 的 ajax 库推荐使用 vue-resource,一般非单页应用在ready里获取数据就行,如果是单页应用根据路由生命周期来获取,比如

route: {
data: function (transition) {
//数据获取,修改data
transition.next()
}
}

以上这篇对vue里函数的调用顺序介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 浅谈Vue的加载顺序探讨
赞 (0)

相关推荐

  • 浅谈Vue的加载顺序探讨

    在Vuejs 1.0版本中,如果父子组件进行配合,它们的生命周期执行具有如下特点: 1. created总是先父后子 生命周期函数created总是按照从父到子的顺序依次执行,但是兄弟之间没有严格按照这样的顺序执行,估计是采用了异步函数,不仅如此,子组件在父组件中的插入顺序也是随机的,并没有什么特别的规律.假定子组件的引用顺序如下: <div class="container"> <child-c1 v-ref:child1></child-c1>

  • 对vue里函数的调用顺序介绍

    method用来定义方法的,比如你@click="test",methods就定义test这个方法 created和ready都是 vue 组件的生命周期 created 类型: Function 详细: 在实例创建之后同步调用.此时实例已经结束解析选项,这意味着已建立:数据绑定,计算属性,方法,watcher/事件回调.但是还没有开始 DOM 编译,$el 还不存在. ready 类型: Function 详细: 在编译结束和 el第一次插入文档之后调用,如在第一次attached钩

  • Vue中的同步和异步调用顺序详解

    目录 Vue的同步和异步调用顺序 例如 Vue两个异步方法顺序执行 第一个异步方法 第二个异步方法 Vue的同步和异步调用顺序 Vue中的方法调用顺序是依次进行的,方法体内部也是依次执行的,但是,两个方法体的执行顺序并不能严格控制. 以下方法中都带有promise函数或异步调用.     initUserData() {       this.getPsCountryList() // 1 获取国家列表stateOptions,方法内同步       this.getTimeZone() //

  • 解析在main函数之前调用函数以及对设计的作用详解

    前几天为新员工写一个简单的测试框架,可让他们方便的写测试用例并且执行.期间遇到一个问题就是如何让他们增加测试用例而用不影响测试框架的代码?c++的单件模式可以解决这个问题,但是其中一个难点是要在main之前注册单件.c++可以通过构造函数来实现注册,c如何注册?最后查了下资料,原来可以定义在main之前调用的函数!有了这个特性可以改善c的模块化设计.特性介绍:如果想定义在main函数之前调用的函数,可以在函数的声明之后加上一句"__attribute__((constructor))"

  • 如何巧用Vue缓存函数浅析

    目录 vue2中的缓存函数 改造vue缓存函数 优化 总结 vue2中的缓存函数 vue2版本中有这么一个缓存函数 /** * Create a cached version of a pure function. */ function cached (fn) { var cache = Object.create(null); return (function cachedFn (str) { var hit = cache[str]; return hit || (cache[str] =

  • vue 父组件中调用子组件函数的方法

    在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数.eg: useInPar:function (str) {console.log(str)} 2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来使用子组件中声明的函数. 父组件: <template> <child-item ref='child' /> <butt

  • 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

    在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} Function()构造函数: var fnMethodName = new Function('x','alert(x);') // 由Function构造函数的参数个数可变.最后一个参数写函数体

  • 在vue中使用回调函数,this调用无效的解决

    let self = this //使用新变量替换this,以免this无效 //updateStudentInfoToServer是一个将本身部分数据异步上传的接口,接收三个参数,其中第一个是数据,第二.三个是函数,第二.三个函数使用function(){}形式书写 updateStudentInfoToServer:function(data, networkOk, networkError){ let postData = this.$qs.stringify({ data:data })

  • vue里使用create,mounted调用方法的正确姿势说明

    vue里使用create,mounted调用方法的正确姿势说明

    目录 使用create,mounted调用方法 我之前有个错误的写法 错误有2 mounted方法和created区别 使用create,mounted调用方法 首先: 我之前有个错误的写法 错误有2 1,我一直以为在created里定义方法然后使用,其实这里的getCustomerInfo只是调用 2,所有的方法都应该在methods里定义,然后在created或者mounted里 使用this调用方法,用这种方式实现初始化 正确写法: 这样,页面开始会初始化信息,修改信息后会执行getCus

  • Vue自定义指令的使用详细介绍

    Vue自定义指令的使用详细介绍

    目录 1. 概述 2. 钩子函数 3. 自定义全局指令 4. 自定义局部指令 5. 使用自定义指令实现权限管理 6. 使用自定义指令实现表单验证 1. 概述 除了核心功能默认内置的指令,Vue也允许注册自定义指令.有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令绑定到元素上执行相关操作. 自定义指令分为: 全局指令和局部指令,当全局指令和局部指令同名时以局部指令为准. 局部指令:只对当前实例(或组件)生效 全局指令:对全部实例(或组件)都生效 2. 钩子函数 自定义指令常用

  • vue里的data要用return返回的原因浅析

    官网的示例 var vm = new Vue({ el: '#example', data: { message: 'Hello' } }); 项目中的写法 data() { return { message: 'Hello' } } 为什么要把data变成函数并return属性呢? 组件是一个可复用的实例,当你引用一个组件的时候,组件里的data是一个普通的对象,所有用到这个组件的都引用的同一个data,就会造成数据污染. 将data封装成函数后,在实例化组件的时候,我们只是调用了data函数

随机推荐