最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

世界时讯:Vue相关笔记

来源:博客园

Promise基本使用

Promise是异步编程的一种解决方案,用于一个异步操作的最终完成(或失败)及其结果值的表示,比传统的回调函数方案更加合理。


(相关资料图)

var promise = new Promise((resolve, reject) => {/* executor函数 */    // ... some code    if (/* 异步操作成功 */){        resolve(value);    } else {        reject(error);    }});promise.then((value) => {    //success}, (error) => {    //failure})

简单实用

function timeout(ms) {    return new Promise((resolve, reject) => {        setTimeout(resolve, ms, "done");    });}timeout(2000).then((value) => {    console.log(value); //done});
var timeoutID = scope.setTimeout(function, [delay, arg1, arg2, ...]);

arg1, ..., argN可选

附加参数,一旦定时器到期,它们会作为参数传递给function

  1. Promise对象在创建后立即执行,then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行。
  2. 如果调用resolve函数和reject函数时带有参数,那么它们的参数会被传递给回调函数。reject函数的参数通常是Error对象的实例,表示抛出的错误;resolve函数的参数除了正常的值以外,还可能是另一个Promise实例。
const p = new Promise((resolve,reject) => {    return reject(new Error("err")); //reject方法的作用,等同于抛出错误    //throw new Error("err");});p.then(null, (err) => {    console.log(err);  //Err: err});//--------等价写法---------p.catch(err => {    console.log(err); //Err: err})

一般总是建议,Promise对象后面要跟catch方法,这样可以处理 Promise内部发生的错误。catch方法返回的还是一个 Promise对象,因此后面还可以接着调用then方法。

new Promise(() => {    throw new Error("err1");})    .then(() => {console.log(1);})    .then(() => {console.log(2);})    .catch((err) => {        console.log(err); //Err: err1        throw  new Error("err2");    })    .catch((err) => {console.log(err);})//Err: err2

Promise对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获。 即:当前catch方法可以捕获上一个catch方法(包括上一个catch)到当前catch(不包括当前catch)方法之间所有的错误,如果没有错误,则当前catch方法不执行。

// badnew Promise()    .then((data) => {/* success */ }, (err) => {/* error */ });// goodnew Promise()    .then((data) => { /* success */ })    .catch((err) => {/* error */ });

一般来说,不要在then方法里面定义Reject状态的回调函数(即then的第二个参数),总是使用catch方法。第二种写法要好于第一种写法,理由是第二种写法可以捕获前面then方法执行中的错误,也更接近同步的写法。

vue里的export default

export命令用于规定模块的对外接口。

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。

// profile.jsvar firstName = "Michael";var lastName = "Jackson";var year = 1958;export {firstName, lastName, year};

export命令对外输出了指定名字的变量(变量也可以是函数或类)

export default命令的区别:import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。

export default命令,为模块指定默认输出。

与export命令的区别:其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。

// export-default.jsexport default function () {  console.log("foo");}
// import-default.jsimport customName from "./export-default";customName(); // "foo"

new VUE()

  • 【Vue.config】 各种全局配置项

  • 【Vue.util】 各种工具函数,还有一些兼容性的标志位

  • 【Vue.set/delete】

  • 【Vue.nextTick】

  • 【Vue.options】 这个options和用来构造实例的options不一样。这个是Vue默认提供的资源(组件指令过滤器)。

  • 【Vue.use】 通过initUse方法定义

  • 【Vue.mixin】 通过initMixin方法定义

  • 【Vue.extend】通过initExtend方法定义

new Vue({  render: h => h(App),}).$mount("#app")

render函数是vue通过js渲染dom结构的函数createElement,约定可以简写为h

实际缩写前为:

render:function(createElement){   return createElement(App);}

实际渲染

import App from "./App"import Vue from "vue"new Vue({  el:"#root",  template:"",  components:{    App  }})

在Vue构造函数时,需要配置一个el属性,如果没有没有el属性时,可以使用.$mount("#app")进行挂载。

// 配置了el属性:new Vue({    el:"#app",    router});// 如果没有配置el属性,可以使用手动挂载$mount("#app")new Vue({    router}).$mount("#app");// 该方法是直接挂载到入口文件index.html 的 id=app 的dom 元素上的

render:h=>h(App)

1、ES6的写法,表示Vue实例选项对象的render方法作为一个函数,接受传入的参数h函数,返回h(App)的函数调用结果2、Vue在创建Vue实例时,通过调用render方法来渲染实例的DOM树3、Vue在调用render方法时,会传入一个createElement函数作为参数,也就是这里的h的实参是createElement函数,然后createElement会以App为参数进行调用。

Vue.use()的作用及原理

官方对 Vue.use() 方法的说明:通过全局方法 Vue.use() 使用插件,Vue.use 会自动阻止多次注册相同插件,它需要在你调用 new Vue() 启动应用之前完成,Vue.use() 方法至少传入一个参数,该参数类型必须是 Object 或 Function,如果是 Object 那么这个 Object 需要定义一个 install 方法,如果是 Function 那么这个函数就被当做 install 方法。在 Vue.use() 执行时 install 会默认执行,当 install 执行时第一个参数就是 Vue,其他参数是 Vue.use() 执行时传入的其他参数。就是说使用它之后调用的是该组件的install 方法。

Vue.use是用来安装插件的。

它在使用时实际是调用了该插件的install方法,所以引入的当前插件如果含有install方法我们就需要使用Vue.use(),例如在Vue中引用Element如下:

import Vue from "vue"import Element from "element-ui"Vue.use(Element)

因为在Element源码中会暴露除install方法,所以才需要用Vue.use()引入。

例如:

vueRouter需要在install方法,对Vue实例做一些自定义化的操作:比如在vue.prototype中添加$router、$route属性、注册组件

而axios是基于Promise封装的库,是完全独立于Vue的,根本不需要挂载在Vue上也能实现发送请求。

vue-router 为什么需要放到 new Vue({router}) options 里

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:

添加全局方法或者属性。如: vue-custom-element添加全局资源:指令/过滤器/过渡等。如 vue-touch通过全局混入来添加一些组件选项。如 vue-router添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router

使用插件也很简单,通过全局方法 Vue.use()使用插件,注意它的调用需要在 new Vue()之前。

但是在使用 vue-router插件时还需要增加一个 options

// 调用 `router.install(Vue)`Vue.use(router)new Vue({  // ...组件选项  router})

hash 路由和 history 路由

  1. hash 路由:监听 url 中 hash 的变化,然后渲染不同的内容,这种路由不向服务器发送请求,不需要服务端的支持;
  2. history 路由:监听 url 中的路径变化,需要客户端和服务端共同的支持;

hash

—— 即地址栏 URL 中的 # 符号

比如这个 URL:http://www.aaa.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

history

—— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

Hash 模式是使用 URL 的 Hash 来模拟一个完整的 URL,因此当 URL 改变的时候页面并不会重载。History 模式则会直接改变 URL,所以在路由跳转的时候会丢失一些地址信息,在刷新或直接访问路由地址的时候会匹配不到静态资源。因此需要在服务器上配置一些信息,让服务器增加一个覆盖所有情况的候选资源,比如跳转 index.html 什么的

hash路由 优缺点

  • 优点
    • 实现简单,兼容性好(兼容到ie8
    • 绝大多数前端框架均提供了给予hash的路由实现
    • 不需要服务器端进行任何设置和开发
    • 除了资源加载和ajax请求以外,不会发起其他请求
  • 缺点
    • 对于部分需要重定向的操作,后端无法获取hash部分内容,导致后台无法取得url中的数据,
    • 服务器端无法准确跟踪前端路由信息
    • 对于需要锚点功能的需求会与目前路由机制冲突

History(browser)路由 优缺点

  • 优点
    • 对于重定向过程中不会丢失url中的参数。后端可以拿到这部分数据
    • 绝大多数前段框架均提供了browser的路由实现
    • 后端可以准确跟踪路由信息
    • 可以使用history.state来获取当前url对应的状态信息
  • 缺点
    • 兼容性不如hash路由(只兼容到IE10)
    • 需要后端支持,每次返回html文档

$route和$router的区别

1.$router是VueRouter的一个对象,通过Vue.use(VueRouter)和Vue构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由,包含了许多关键的对象和属性。

2.$route是一个跳转的路由对象,每一个路由都会有一个$route对象,是一个局部的对象,可以获取对应的name,path,params,query等

全局事件总线

全局事件总线说到底就是个对象,我们通常就是用vm对象作为全局事件总线使用把vm对象添加到Vue原型对象 就形成全局事件总线(vm)

1、所有的组件对象必须都能看得到这个总线对象,因此我们把这个对象放在了Vue原型2、这个事件总线对象必须能调用$on和$emit方法(总线对象必须是Vue的实例化对象或者是组件对象)

1、vm.$on( event, callback )

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

2、vm.$emit( event, […args] )

触发当前实例上的事件。附加参数都会传给监听器回调,如果没有参数,形式为vm.$emit(event)

3、vm.$off( [event, callback] )

移除自定义事件监听器。

关键词: 回调函数 可以使用 发送请求