Vue开发中的一些“非常规”方法（一）

开发过程中偶尔会遇到特殊复杂的业务场景。这时候，采用一些冷门的、特殊的技术方案，往往会起到以往的作用，了解其中的一些也有助于知识的扩展。1.provide和inject常见于各种组件库，不建议直接在业务代码中使用。无论嵌套多深；后代组件通过注入接收。//parentcomponent:provide:{//provide是一个提供属性或方法的对象foo:'thisisfoo',fooMethod:()=>{console.log('parentcomponentfooMethodiscalled')}},//childorgrandchildcomponentinject:['foo','fooMethod'],//数组或对象，注入子组件mounted(){this.fooMethod()console.log(this.foo)}//inparent组件下的所有子组件都可以使用inject注意事项：1.provide和inject必须成对使用；2.provide和injectbinding不能响应（但是对于引用类型，因为JS的特性，还是可以对应的）。2.$root//父组件mounted(){console.log(this.$root)//获取根实例，最后所有组件都挂载到根实例上console.log(this.$root.$children[0])//获取根实例的一级子组件console.log(this.$root.$children[0].$children[0])//获取根实例的二级子组件}3.Vue.observable使对象响应。Vue会在内部使用它来处理数据函数返回的对象；返回的对象可以直接在渲染函数和计算属性中使用，变化时会触发相应的更新；它也可以用作最小化的跨组件状态存储，用于简单的场景。通信原理本质上是使用Vue.observable实现一个简单的vuex//文件路径-/store/store.jsimportVuefrom'vue'exportconststore=Vue.observable({count:0})exportconstmutations={setCount(count){store.count=count}}//使用四、render函数在制作自定义页面内容块的需求中使用了这个东西。如果一个模板中有很多重复的代码，可以使用render()进行优化。//根据props生成标签//初级//优化版，使用render函数降低代码重复率五、异步组件的作用不用赘述，下面是几种实现异步组件的方法Method//FactoryfunctionexecutesresolveCallbackVue.component('async-webpack-example',function(resolve){//这种特殊的`require`语法会告诉webpack//自动拆分你的构建代码分成多个包，这些包//将通过Ajax请求加载require(['./my-async-component'],resolve)})//工厂函数返回PromiseVue.component('async-webpack-example',//this`import`函数会返回一个`Promise`对象。()=>import('./my-async-component'))//工厂函数返回一个配置组件对象constAsyncComponent=()=>({//Required加载的组件（应该是一个`Promise`对象）component:import('./MyComponent.vue'),//加载异步组件时使用的组件loading:LoadingComponent,//加载失败时使用的组件error:ErrorComponent,//显示组件加载时的延迟时间。默认值为200（毫秒）delay:200,//如果提供了超时，组件加载也超时，//使用加载失败时使用的组件。默认值为：`Infinity`超时：3000})