大前端每天10道面试题，附答案

扫码添加“SevenBlog”公众号，小编会不定时更新前端知识点，面试题，只有每天坚持学习，才不会被淘汰

1. 跟keep-alive有关的生命周期是哪些？描述下这些生命周期

keep-alive的生命周期
1.activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
2.deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

2. 使用vue后怎么针对搜索引擎做SEO优化？

采用服务端渲染，预渲染等等技术

3. 怎么解决vue动态设置img的src不生效的问题？

因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require

4. 怎么解决vue打包后静态资源图片失效的问题？

设置assetsPublicPath将 assetsPublicPath: ‘/‘ 改为 assetsPublicPath: ‘./‘

找到config/index.js 配置文件，找build打包对象里的assetsPublicPath属性

默认值为/，更改为./就好了

1.静态图片，webpack打包的时候复制到指定目录,设置assetsPublicPath

2.图片路径使用绝对路径

最新的vue-cli 需要在根目录下建一个vue.config.js 在里面配置publicPath即可

vue-cl3

5. vue2.0不再支持v-html中使用过滤器了怎么办？

在method中定义方法

htmlFilter(htmlString){return htmlString.replace(/+s/g,'')}

在vue中 v-html=”htmlFilter(htmlString)”即可

可以使用 computed

可以使用 filters过滤器

可以使用 全局方法

6. 怎么给vue定义全局的方法？

1、通过prototype，这个非常方便。Vue.prototype[method]=method;

2、通过插件Vue.use(plugin)；

3、通过mixin，Vue.mixin(mixins);

7. vue中data的属性可以和methods中的方法同名吗？为什么？

不能同名，如果真的重名了，data中的变量会覆盖methods中的方法，再者，如果重名了，我们使用this.xxxx调用的是哪个？是方法还是属性？

8. 在使用计算属性的时，函数名和data数据源中的数据可以同名吗？

不能同名 因为不管是计算属性还是data还是props 都会被挂载在vm实例上，因此 这三个都不能同名

9. 你有使用过vue开发多语言项目吗？说说你的做法？

首先安装vue-i18n依赖（npm）

npm install vue vue-i18n --save

在vue项目src文件夹下新建一个 i18n 文件夹存放i18n要用的文件

在创建一个lang文件夹存放你需要的语言包

//cn.js
module.exports = {
  lange: {
    cn:'中文',
    en:'英文',
    jp:'日文',
    kr:'韩文'  
  }

创建一个index.js来配置i18n

import VueI18n from 'vue-i18n'   //引入vue-i18n
import Vue from 'vue'
Vue.use(VueI18n)
var locale;
localStorage.getItem('locale') ? locale = localStorage.getItem('locale') : locale = 'cn';
const i18n = new VueI18n({
  locale: locale,    // 语言标识
  messages: {
    'cn': require('./lang/cn'),   // 中文语言包
    'en': require('./lang/en'),   // 英文语言包
    'jp': require('./lang/jp'),   // 日文语言包
    'kr': require('./lang/kr')    // 韩文语言包
  },
})
export default  i18n

这里讲解一下为什么上面要用到localStorage.getItem(‘locale’)，因为vue整个项目都是多语言的，做本地存储的目的是希望在被刷新的时候依然不会改变当前选中的语言，下面会做进一步讲解

还需要在main.js引入i18n并具名在vue

import i18n from './i18n'  //引入i18n
new Vue({
  el: '#app',
  router,
  i18n,  //这里需要具名
  store,
  components: { App },
  template: '<App/>'
})

写一个lange.vue来做多语言切换

data钩子里写要切换的list，$t(“language.cn”)就是i18n自动匹配需要翻译的语言，在html上的写法{{$t(“language.cn”)}}

list: [
  {type:'cn',name:this.$t("language.cn"),id:1},
  {type:'en',name:this.$t("language.en"),id:2},
  {type:'jp',name:this.$t("language.jp"),id:3},
  {type:'kr',name:this.$t("language.kr"),id:4},
]

最后在选择确认哪一种语言时，需要将上面的type（eg: cn / en / jp / kr）存入到i18n的locale，这样一来会马上执行匹配当前的语言,除此之外还需要将type存入本地，为了防止刷新后所选择的语言包不是当前的语言包(对上面进行进一步的解说)

this.$i18n.locale = this.locale;  //修改i18n的locale值，
localStorage.setItem('locale',this.locale);  //存入本地的locale值

10. 你知道v-model的原理吗？说说看

v-mode是:value=”msg”@input=”msg=$event.target.value”的语法糖，其中:value=”msg”是绑定了数据，value就是input输入框里的值；@input=”msg=$event.target.value”就是监听input输入框里值的变化，然后改变值。一句话概括就是，绑定数据并且监听数据改变

很多知识点，是小编通过查找相关资料整理出来的，非原创，扫描添加“SevenBlog”公众号，小编会定时更新前端各类知识点

标签：10,面试题,vue,cn,locale,前端,jp,语言包,i18n
来源： https://blog.csdn.net/wwsseeddrrff/article/details/115206455