vue初始化过程

vue create 和vue init webpack的区别

。

vuecreate是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档网页链接。

vueinit是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。

vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)。

谷歌人工智能写作项目：小发猫

vue如何动态调用方法

通常我们会在组件里的template属性定义模板，或者是在*.vue文件里的template标签里写模板typescript语法教程，typescript type用法。但是有时候会需要动态生成模板的需求，例如让用户自定义组件模板，或者设置组件的布局。

例如要做一个类select的组件，用户传入options数据，通过valueprop获取选中值，最基本的原型如下。

Vue.component('XSelect',{template:``,props:['value','options']})如果此时需要增加一个API支持让用户自定义option部分的模板。

此处用slot并不能解决问题。

通过$options.template修改通过打印组件对象可以获得一个信息，在$options里定义了一个template属性，写在template标签里的模板，最终编译后也会在$options.template里。

通过文档的生命周期可以得知，在created的时候，实例已经结束解析选项，但是还没有开始DOM编译也就是说，如果用户通过prop的数据我们可以获得，但是模板其实还没有渲染成DOM。

经过测试，在created修改this.$options.template是可以改变最终生成的DOM的，同时也能拿到props的内容。

那么我们可以修改下代码，使其支持自定义模板Vue.component('XSelect',{props:['value','options',{name:'template',default:''}],created(){varoptionTpl=this.templatethis.$options.template=`${optionTpl}`}})用户使用是就可以传入模板了可能存在的问题我们知道Vue在内部帮我们做了许多优化，但是在这里可能会由于某些优化导致动态拼接的模板无法渲染成功。

例如这里我们不使用v-for而是手工遍历options生成需要的HTMLconsttpl=(opt=>`${this.optionTpl}`)this.$options.template=`${tpl}`这里会导致一个BUG，如果一个页面有多个x-select组件，并且options长度不一样，会导致长的options的组件后面几个选项渲染不出来。

究其原因是Vue会帮我们缓存模板编译结果。翻看代码可以找到里有做优化，同时提供的_linkerCachable本意是给内联模板使用。

我们可以通过设置this.$options._linkerCachable=false达到我们的目的。

这样我们就可以开发让用户自定义布局的组件了，用户传入布局参数，通过手工拼接模板，设置了_linkerCachable=false也不会被缓存。

通过$options.partials动态添加partial使用partials也能达到添加自定义模板的目的，但是通常的做法是要全局注册partial，这么做并不优雅。

vue-strap就是这么做的。如果重名了会被覆盖（初次渲染不会，但是数据更新重新渲染DOM时就会被覆盖）。

通过文档我们知道可以在组件内部通过partials属性注册局部的partial，因此自然而然也可以在this.$options.partials去动态添加了。

怎么样在第一次初始化页面的时候就触发JS中函数

页面的初始化是由上至下的顺序，所以只需要把JS的函数写成页面加载就执行的形式，例如：$(function(){里面写函数})，然后放在页面head标签第一个。

就会在初始化的最开始就执行JS函数，可以根据自己的需求调整位置。