㈠ vue实现路由跳转的原理是什么，是调用js底层什么方法
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式:
1. 在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航
2. 使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL。
当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
目录结构
先来看看整体的目录结构
和流程相关的主要需要关注点的就是 components、history 目录以及 create-matcher.js、create-route-map.js、index.js、install.js。下面就从 basic 应用入口开始来分析 vue-router 的整个流程。
import Vue from 'vue'
import VueRouter from 'vue-router'
// 1. 插件
// 安装 <router-view> and <router-link> 组件
// 且给当前应用下所有的组件都注入 $router and $route 对象
Vue.use(VueRouter)
// 2. 定义各个路由下使用的组件，简称路由组件
const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 3. 创建 VueRouter 实例 router
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Home },
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
// 4. 创建 启动应用
// 一定要确认注入了 router
// 在 <router-view> 中将会渲染路由组件
new Vue({
router,
template: ` <div id="app">
<h1>Basic</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/foo">/foo</router-link></li>
<li><router-link to="/bar">/bar</router-link></li>
<router-link tag="li" to="/bar">/bar</router-link>
</ul>
<router-view class="view"></router-view>
</div>
`
}).$mount('#app')04142
作为插件
上边代码中关键的第 1 步，利用 Vue.js 提供的插件机制 .use(plugin) 来安装 VueRouter，而这个插件机制则会调用该 plugin 对象的 install 方法（当然如果该 plugin 没有该方法的话会把 plugin 自身作为函数来调用）；下边来看下 vue-router 这个插件具体的实现部分。
VueRouter 对象是在 src/index.js 中暴露出来的，这个对象有一个静态的 install 方法：
/* @flow */
// 导入 install 模块
import { install } from './install'// ...import { inBrowser, supportsHistory } from './util/dom'// ...export default class VueRouter {
// ...}
// 赋值 install
VueRouter.install = install
// 自动使用插件if (inBrowser && window.Vue) {
window.Vue.use(VueRouter)
}123456789101112131415161718
可以看到这是一个 Vue.js 插件的经典写法，给插件对象增加 install 方法用来安装插件具体逻辑，同时在最后判断下如果是在浏览器环境且存在 window.Vue 的话就会自动使用插件。
install 在这里是一个单独的模块，继续来看同级下的 src/install.js 的主要逻辑：
// router-view router-link 组件import View from './components/view'import Link from './components/link'// export 一个 Vue 引用export let _Vue// 安装函数export function install (Vue) {
if (install.installed) return
install.installed = true
// 赋值私有 Vue 引用
_Vue = Vue // 注入 $router $route
Object.defineProperty(Vue.prototype, '$router', {
get () { return this.$root._router }
}) Object.defineProperty(Vue.prototype, '$route', {
get () { return this.$root._route }
}) // beforeCreate mixin
Vue.mixin({
beforeCreate () { // 判断是否有 router
if (this.$options.router) { // 赋值 _router
this._router = this.$options.router // 初始化 init
this._router.init(this) // 定义响应式的 _route 对象
Vue.util.defineReactive(this, '_route', this._router.history.current)
}
}
}) // 注册组件
Vue.component('router-view', View)
Vue.component('router-link', Link)// ...}0414243
这里就会有一些疑问了？
· 为啥要 export 一个 Vue 引用？
插件在打包的时候是肯定不希望把 vue 作为一个依赖包打进去的，但是呢又希望使用 Vue 对象本身的一些方法，此时就可以采用上边类似的做法，在 install 的时候把这个变量赋值 Vue ，这样就可以在其他地方使用 Vue 的一些方法而不必引入 vue 依赖包（前提是保证 install 后才会使用）。
· 通过给 Vue.prototype 定义 $router、$route 属性就可以把他们注入到所有组件中吗？
在 Vue.js 中所有的组件都是被扩展的 Vue 实例，也就意味着所有的组件都可以访问到这个实例原型上定义的属性。
beforeCreate mixin 这个在后边创建 Vue 实例的时候再细说。
实例化 VueRouter
在入口文件中，首先要实例化一个 VueRouter ，然后将其传入 Vue 实例的 options 中。现在继续来看在 src/index.js 中暴露出来的 VueRouter 类：
// ...import { createMatcher } from './create-matcher'// ...export default class VueRouter {
// ...
constructor (options: RouterOptions = {}) {
this.app = null
this.options = options
this.beforeHooks = []
this.afterHooks = []
// 创建 match 匹配函数
this.match = createMatcher(options.routes || [])
// 根据 mode 实例化具体的 History
let mode = options.mode || 'hash'
this.fallback = mode === 'history' && !supportsHistory if (this.fallback) {
mode = 'hash'
} if (!inBrowser) {
mode = 'abstract'
}
this.mode = mode switch (mode) {
case 'history':
this.history = new HTML5History(this, options.base) break
case 'hash':
this.history = new HashHistory(this, options.base, this.fallback) break
case 'abstract':
this.history = new AbstractHistory(this) break
default:
assert(false, `invalid mode: ${mode}`)
}
}
// ...}
里边包含了重要的一步：创建 match 匹配函数。
match 匹配函数
匹配函数是由 src/create-matcher.js 中的 createMatcher 创建的：
/* @flow */
import Regexp from 'path-to-regexp'// ...import { createRouteMap } from './create-route-map'// ...export function createMatcher (routes: Array<RouteConfig>): Matcher {
// 创建路由 map
const { pathMap, nameMap } = createRouteMap(routes)
// 匹配函数 function match (
raw: RawLocation,
currentRoute?: Route,
redirectedFrom?: Location
): Route {
// ...
} function redirect (
record: RouteRecord,
location: Location
): Route {
// ...
} function alias (
record: RouteRecord,
location: Location,
matchAs: string
): Route {
// ...
} function _createRoute (
record: ?RouteRecord,
location: Location,
redirectedFrom?: Location
): Route { if (record && record.redirect) { return redirect(record, redirectedFrom || location)
} if (record && record.matchAs) { return alias(record, location, record.matchAs)
} return createRoute(record, location, redirectedFrom)
}
// 返回 return match
}
// ...04142434445464748495051
具体逻辑后续再具体分析，现在只需要理解为根据传入的 routes 配置生成对应的路由 map，然后直接返回了 match 匹配函数。
继续来看 src/create-route-map.js 中的 createRouteMap 函数：
/* @flow */import { assert, warn } from './util/warn'import { cleanPath } from './util/path'// 创建路由 mapexport function createRouteMap (routes: Array<RouteConfig>): {
pathMap: Dictionary<RouteRecord>,
nameMap: Dictionary<RouteRecord>
} { // path 路由 map
const pathMap: Dictionary<RouteRecord> = Object.create(null) // name 路由 map
const nameMap: Dictionary<RouteRecord> = Object.create(null) // 遍历路由配置对象 增加 路由记录
routes.forEach(route => {
addRouteRecord(pathMap, nameMap, route)
}) return {
pathMap,
nameMap
}
}// 增加 路由记录 函数function addRouteRecord (
pathMap: Dictionary<RouteRecord>,
nameMap: Dictionary<RouteRecord>,
route: RouteConfig,
parent?: RouteRecord,
matchAs?: string
) {
// 获取 path 、name
const { path, name } = route
assert(path != null, `"path" is required in a route configuration.`) // 路由记录 对象
const record: RouteRecord = {
path: normalizePath(path, parent),
components: route.components || { default: route.component },
instances: {},
name, parent,
matchAs,
redirect: route.redirect,
beforeEnter: route.beforeEnter,
meta: route.meta || {}
} // 嵌套子路由 则递归增加 记录
if (route.children) {// ...
route.children.forEach(child => {
addRouteRecord(pathMap, nameMap, child, record)
})
} // 处理别名 alias 逻辑 增加对应的 记录
if (route.alias !== undefined) { if (Array.isArray(route.alias)) {
route.alias.forEach(alias => {
addRouteRecord(pathMap, nameMap, { path: alias }, parent, record.path)
})
} else {
addRouteRecord(pathMap, nameMap, { path: route.alias }, parent, record.path)
}
} // 更新 path map
pathMap[record.path] = record // 更新 name map
if (name) { if (!nameMap[name]) {
nameMap[name] = record
} else {
warn(false, `Duplicate named routes definition: { name: "${name}", path: "${record.path}" }`)
}
}
}function normalizePath (path: string, parent?: RouteRecord): string {
path = path.replace(/\/$/, '') if (path[0] === '/') return path if (parent == null) return path return cleanPath(`${parent.path}/${path}`)
}57677787980818283
可以看出主要做的事情就是根据用户路由配置对象生成普通的根据 path 来对应的路由记录以及根据 name 来对应的路由记录的 map，方便后续匹配对应。
实例化 History
这也是很重要的一步，所有的 History 类都是在 src/history/ 目录下，现在呢不需要关心具体的每种 History 的具体实现上差异，只需要知道他们都是继承自 src/history/base.js 中的 History 类的：
/* @flow */// ...import { inBrowser } from '../util/dom'import { runQueue } from '../util/async'import { START, isSameRoute } from '../util/route'// 这里从之前分析过的 install.js 中 export _Vueimport { _Vue } from '../install'export class History {// ...
constructor (router: VueRouter, base: ?string) { this.router = router this.base = normalizeBase(base) // start with a route object that stands for "nowhere"
this.current = START this.pending = null
}// ...}// 得到 base 值function normalizeBase (base: ?string): string { if (!base) { if (inBrowser) { // respect <base> tag
const baseEl = document.querySelector('base') base = baseEl ? baseEl.getAttribute('href') : '/'
} else { base = '/'
}
} // make sure there's the starting slash
if (base.charAt(0) !== '/') { base = '/' + base
㈡ vue $emit 调用父组件异步方法，执行完毕后再执行子组件的某方法，如何实现
//可以使用回调的方法
//父页面
//父页面调用组件的html中添加事件@test="test"
methods:{
test(data,cab){
setTimeout(()=>{
//这里使用定时器模拟执行完方法
console.log(data)//这是传递过来的参数用于处理
data++
cab(data)//将处理完成的数据返回回去
},2000)
}
}
//子页面
this.$emit('tset',1,(res)=>{
console.log(res)//2秒后会执行这一句打印2
})
//我们也可以用Promise的方法代替回调
methods:{
test(data){
returnnewPromise((resolve)=>{
setTimeout(()=>{
//这里使用定时器模拟执行完方法
console.log(data)//这是传递过来的参数用于处理
data++
resolve(data)//将处理完成的数据返回回去
},2000)
})
}
}
//子页面
constres=awaitthis.$emit('tset',1)
console.log(res)//2秒后会执行这一句
㈢ c#一个类方法怎么调用async方法
如果要回去异步方法获取的结果：await 异步方法();
如果不要回去异步方法返回的结果，就正常调用：异步方法();
㈣ 不加 await 调用 async 方法吗
这样的API被叫做同步或者阻塞。同步API易于理解和使用，不过在你的程序内部当前线程没有反应时，API就无法控制你的代码去做其它任务，因为它还不能传递结果。
㈤ c#中为什么async方法里必须还要有await
首先一个被标记为async的方法，可以没有await调用，只不过会有编译警告。
这是很显然的，不是说你把一个方法标记成async这个方法就成了异步调用的方法了。async这个关键词其实反而是可以省略的，这个关键词存在的意义是为了向下兼容，为await提供上下文而已。
所以，一个async的方法里面没有await的调用，那等于是脱了裤子放屁，本质上只是把return xxx改成了retrurn Task.FromResult( xxx )而已，没有任何变化。如果一个方法加上了async他就自动成为了异步的调用，说明你连最根本的异步是什么都没搞清楚。你所理解的那种所谓的异步，直接用Task.Run就可以了
㈥ 如何在没有 async 修饰的方法中使用异步方法
使用异步编程，可以避免性能瓶颈并增强应用程序的总体响应能力。 但是，编写异步应用程序的传统技术可能比较复杂，使它们难以编写、调试和维护。 C# 中的 async 和 await 关键字都是异步编程的核心。 通过使用这两个关键字，可以使用 .NET framework 或 Windows 运行时中的资源轻松创建异步方法（几乎与创建同步方法一样轻松）。 通过使用被称为异步方法的 async 和 await 定义的异步方法。 特征： 方法签名包含一个 Async 或 async 修饰符。 按照约定，异步方法的名称以“Async”后缀结尾。 返回类型为下列类型之一： 如果你的方法有操作数为 TResult 类型的返回语句，则为 Tasklt;TResultgt;。 如果你的方法没有返回语句或具有没有操作数的返回语句，则为 Task。 方法通常包含至少一个 await 表达式，该表达式标记一个点，在该点上，直到等待的异步操作完成方法才能继续。 同时，将方法挂起，并且控件返回到方法的调用方。 本主题的下一节将解释悬挂点发生的情况。 在异步方法中，可使用提供的关键字和类型来指示需要完成的操作，且编译器会完成其余操作，其中包括持续跟踪控件以挂起方法返回等待点时发生的情况。 一些常规流程（例如，循环和异常处理）在传统异步代码中处理起来可能很困难。 在异步方法中，元素的编写频率与同步解决方案相同且此问题得到解决。
㈦ async用于函数调用接口只能适用于vue吗，适用原生的js吗
async/await 是ES2017加入的,只要你的开发和运行环境支持ES2017都可以使用
㈧ android AsyncTask的方法在哪几个线程中调用
在开发Android移动客户端的时候往往要使用多线程来进行操作，我们通常会将耗时的操作放在单独的线程执行，避免其占用主线程而给用户带来不好的用户体验。但是在子线程中无法去操作主线程（UI 线程），在子线程中操作UI线程会出现错误。因此android提供了一个类Handler来在子线程中来更新UI线程，用发消息的机制更新UI界面，呈现给用户。这样就解决了子线程更新UI的问题。但是费时的任务操作总会启动一些匿名的子线程，太多的子线程给系统带来巨大的负担，随之带来一些性能问题。因此android提供了一个工具类AsyncTask，顾名思义异步执行任务。这个AsyncTask生来就是处理一些后台的比较耗时的任务，给用户带来良好用户体验的，从编程的语法上显得优雅了许多，不再需要子线程和Handler就可以完成异步操作并且刷新用户界面。
先大概认识下Android.os.AsyncTask类：
* android的类AsyncTask对线程间通讯进行了包装，提供了简易的编程方式来使后台线程和UI线程进行通讯：后台线程执行异步任务，并把操作结果通知UI线程。
* AsyncTask是抽象类.AsyncTask定义了三种泛型类型 Params，Progress和Result。
* Params 启动任务执行的输入参数，比如HTTP请求的URL。
* Progress 后台任务执行的百分比。
* Result 后台执行任务最终返回的结果，比如String,Integer等。
* AsyncTask的执行分为四个步骤，每一步都对应一个回调方法，开发者需要实现这些方法。
* 1) 继承AsyncTask
* 2) 实现AsyncTask中定义的下面一个或几个方法
* onPreExecute(), 该方法将在执行实际的后台操作前被UI 线程调用。可以在该方法中做一些准备工作，如在界面上显示一个进度条，或者一些控件的实例化，这个方法可以不用实现。
* doInBackground(Params...), 将在onPreExecute 方法执行后马上执行，该方法运行在后台线程中。这里将主要负责执行那些很耗时的后台处理工作。可以调用 publishProgress方法来更新实时的任务进度。该方法是抽象方法，子类必须实现。
* onProgressUpdate(Progress...),在publishProgress方法被调用后，UI 线程将调用这个方法从而在界面上展示任务的进展情况，例如通过一个进度条进行展示。
* onPostExecute(Result), 在doInBackground 执行完成后，onPostExecute 方法将被UI 线程调用，后台的计算结果将通过该方法传递到UI 线程，并且在界面上展示给用户.
* onCancelled(),在用户取消线程操作的时候调用。在主线程中调用onCancelled()的时候调用。
为了正确的使用AsyncTask类，以下是几条必须遵守的准则：
1) Task的实例必须在UI 线程中创建
2) execute方法必须在UI 线程中调用
3) 不要手动的调用onPreExecute(), onPostExecute(Result)，doInBackground(Params...), onProgressUpdate(Progress...)这几个方法，需要在UI线程中实例化这个task来调用。
4) 该task只能被执行一次，否则多次调用时将会出现异常
doInBackground方法和onPostExecute的参数必须对应，这两个参数在AsyncTask声明的泛型参数列表中指定，第一个为doInBackground接受的参数，第二个为显示进度的参数，第第三个为doInBackground返回和onPostExecute传入的参数。
㈨ 如何正确理解.NET 4.5和C#5.0中的async/await异步编程模式
这个await，其实只是把对老版本C#迭代器的惯用法官方化了。现在很多平台都因为一些原因不得不用旧版本的C#，比如unity，想异步那只能通过迭代器来做。
async、迭代器都是语法糖，编译器会帮你实现成一个状态机匿名类，实例里面hold住一些临时变量，记录一下当前状态。根据你写的yield/await，把一个异步方法拆成几个同步block，根据一定规则定期的去MoveNext一下，Current是Task那我就根据你配置的线程上下文决定把这个Task跑在哪个线程上。
那么用await修饰的异步方法是在哪个线程中被调用的？为什么上面这个事件处理方法不会阻塞GUI？
我还看到其它一些描述是说使用async/await异步模式不会生成新的线程，那么只在原来已有线程的基础上面如何做到异步运行？
题主这个例子这个方法就是在UI线程调用的，并且没有ConfigureAwait(false)，所以会在当前await时捕捉的UI线程上下文执行之后的同步block。
至于为什么不会阻塞，可以简单理解为执行了第一个block，碰到Delay(4000)，给UI线程的定时器挂一个4000时间之后再调用下一个同步块的回调。
看题主说的书名像是国产的书，这方面还是看《CLR via C#》或者《Concurrency in C# cookbook》比较好。
㈩ static async 方法怎么调用
在即将到来的新的Windows Runtime中更根本地确定任何API都不会运行超过50ms的时间。需要更长时间的操作将会由'kick off this operation'API来代替，不等待运算结果就直接立刻返回。这样做是因为Microsoft希望Windows8 Metro程序能够在即时的触控.