vue问题集

84 阅读3分钟

1、你知道vue的模板语法用的是哪个web模板引擎的吗

  • vue使用了基于HTML的模板语法,渲染最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

优点:

  1. 可维护性(后期改起来方便);
  2. 可扩展性(想要增加功能,增加需求方便);
  3. 开发效率提高(程序逻辑组织更好,调试方便);
  4. 看起来舒服(不容易写错)

2、# 使用vue后怎么针对搜索引擎做SEO优化?

1.SSR服务器渲染, 可以使用nuxt.js;
2.静态化;
3.预渲染prerender-spa-plugin; 4.vue是单页面应用,meta固定了,js动态修改meta爬虫也是爬不到的 5.使用Phantomjs针对爬虫做处理。

  • 5-1
  • Phantomjs是一个基于webkit内核的无头浏览器,即没有UI界面,即它就是一个浏览器,只是其内的点击、翻页等人为相关操作需要程序设计实现。
    虽然“PhantomJS宣布终止开发”,但是已经满足对Vue的SEO处理。
    这种解决方案其实是一种旁路机制,原理就是通过Nginx配置,判断访问的来源UA是否是爬虫访问,如果是则将搜索引擎的爬虫请求转发到一个node server,再通过PhantomJS来解析完整的HTML,返回给爬虫。([vue-seo-phantomjs])

优势:

  • 完全不用改动项目代码,按原本的SPA开发即可,对比开发SSR成本小不要太多;
  • 对已用SPA开发完成的项目,这是不二之选。

不足:

  • 部署需要node服务器支持;
  • 爬虫访问比网页访问要慢一些,因为定时要定时资源加载完成才返回给爬虫;
  • 如果被恶意模拟百度爬虫大量循环爬取,会造成服务器负载方面问题,解决方法是判断访问的IP,是否是百度官方爬虫的IP。

3、vue中怎么重置data?

Object.assign(this.data,this.data, this.options.data())

说明:
this.data获取当前状态下的datathis.data获取当前状态下的data this.options.data()获取该组件初始状态下的data(即初始默认值)
如果只想修改data的某个属性值,可以this[属性名] = this.options.data()[属性名],如this.message=this.options.data()[属性名],如this.message = this.options.data().message

常见用于表单重置

在vue3中 为什么通过reactve解构会失去响应式而通过ref解构不会失去响应式

ref是一个简单的包装器,它将基本数据类型或对象包装在一个响应式对象中。这意味着当你使用ref解构一个响应式对象时,你实际上是解构这个包装器对象,而不是原始值或对象本身。因此,你仍然可以保持响应式,因为对包装器的访问会被拦截并触发响应式更新。

相反,reactive是一个更复杂的API,它使用ES6的Proxy对象来实现响应式。当你使用reactive解构一个对象时,你实际上是在解构对象本身,而不是包装器对象。因此,如果你需要访问响应式对象的属性或方法,你需要使用toRefs将其转换为响应式引用,否则你可能会失去响应式。