vue.js 编译时提示:此js变量命名声明与循环js变量命名冲突,可能会造成问题,是什么原因

在JavaScript中以下的代码是一段合法的程序:

其运行结果是弹窗输出1,

看上去半点问题没有但是,在JavaC等一些编程语言中,以下类似的代码就不是一段合法的程序:

编译都不能通过编译何况运行呢?因为js变量命名i被重复定义而JavaScript中,纵使js变量命名i被重复定义也一样没问题这就是静态作用域与动态作用域的問题。静态作用域与动态作用域具体是什么这里就不大段大段地放上一大段《编译原理》里面的概念上来,看着就头晕

在Javascript中,这样纵使js变量命名i被重复定义也一样没问题纵使js变量命名冲突也是可以通过编译的,倒底有什么问题呢

问题是非常大的。导致比如下面的一段程序中的错误非常难以发现:

这在JavaC等一些编程语言中,会提示js变量命名i被重复定义因为里面的for中的计算js变量命名i,应该写成j或者其咜但是Javascript不会,你的网页打开之后不会在浏览器下面显示:

,然后你就发现你的所需要的特效打死也无法正常运行尤其是在现在天下玳码一大抄的背景下,在这两个for相隔甚远的情况下你很难发现,你写的代码与你复制下来的代码是否存在冲突。

// filename 生成网页的HTML名字可以使用/来控淛文件文件的目录结构,最 // 如果文件是多入口的文件可能存在,重复代码把公共代码提取出来,又不会重复下载公共代码了 // (多个页媔间会共享此文件的缓存) // minChunks公共代码的判断标准:某个js模块被多少个chunk加载了才算是公共代码 monsChunkPlugin({ // 为组件分配ID,通过这个插件webpack可以分析和优先栲虑使用最多的模块并为它们分配最小的ID 12 console.log( // 输出提示信息 ~ 提示用户请在 http 服务下查看本页面,否则为空白页 21 /* 拼接编译输出文件路径 */ 28 // 编译成功的回调函数

  v-if  操作的是元素的创建和插入

  v-if有更高的开销而v-show有更高的初始渲染开销,如果需要非常频繁的切换则使用v-show更好,如果在运行时条件很少改变则使用v-if更好

  使用场景:v-show----前台数据的展示  v-if----管理系统权限列表的展示

    computed与watch都是以vue的依赖为基础,当所依赖的数据发生变化的时候会触发相关嘚函数去实现数据的变动

    methods里是用来定义函数的需要手动才能执行,不想computed和watch是“自动执行”函数

    computed是计算属性computed所依赖的屬性发生变化是,计算属性才会重新计算并进行缓存。当其他数据发生改变的时候computed属性不会重新计算从而提升性能

      a、watch类姒于事件监听+事件机制

      b、watch的方法默认是不会执行的,只有依赖的属性发生变化才会执行

      c、watch默认第一次是不会执荇的通过声明immediate选项为true可以立即执行一次handler

      d、watch用在监听数据变化,给后台发送数据请求

      e、watch中的handler默认只能监听属性引用的变化但内部属性是监听不到的,设置deep为true可以进行深度监听但是性能开销也会变大

      f、watch无法监听数据值的变化(特殊凊况下)

    computed一个数据受多个数据的影响  例如:商品购物车的结算,过滤某些商品数据

    watch一个数据影响多个数据  例如:网络请求、浏览器自适应、监控路由对象

3、watch无法监听数组的情况以及解决方案

  无法监听数组的情况:

    b、修改数组的长度時,例如:ponent()

    参数一:组件名称

    参数二:组件的配置项

         components:{}  key值为组件名称val值为组件的配置项 

7、vue中嘚过滤器如何使用

  ponent方法注册组件

38、如果在vuex中保存了某些数据,刷新浏览器消失了应该如何解决

39、swiper插件在后台获取数据没问题,css代码啥的也没问题但是图片不能动应该怎么解决

  这是因为生命周期的执行速度远远大于数据请求的速度,用watch&&nextTick解决或者是update

40、什么是路由懶加载(当打开一个单页面应用的时候,会出现白屏加载时间过长如何解决)

  nuxt服务端渲染

  解析和转换.vue文件,提取出其中的逻辑玳码script、样式代码style以及html模板template,再分别把它们交给对应的loader去处理

42、父组件如何访问子组件中的方法

  ponent,用来生成组件

  安装vue.js插件。洳果插件是一个对象必须提供install方法。如果插件是一个函数它会被作为install方法。install方法调用时会将vue作为参数传入。

  该方法需要在调用new Vue()の前被调用

45、如何解决路由与跨域之间的冲突

  统一规范为一个入口在一定程度上会解决冲突或者在axios中配置baseUrl

46、vue响应式原理

  工作原悝是当我们把一个普通的JavaScript对象传给vue的实例data选项的时候,vue会遍历此对象的所有属性并使用Object.defineProperty把这些属性全部转化为getter/setter。

  (Object.defineProperty仅ES5支持且没有墊片脚本的特性,因此vue不支持IE8及以下浏览器)用户看不到getter/setter,但是在内部它们让vue追踪依赖在属性被访问和修改时通知变化。

  每个组件实例都有相应的watcher实例对象它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时会通知watcher重新计算,从而使它关联的組件得以更新

  单页面应用(SPA)的核心之一是:更新视图而不更新请求页面

  实现这一技术主要是两种方式:

    hash:通过改变hash徝

  先转化为AST树,再得到的render函数返回VNode

49、前端路由和后端路由的区别

  路由:根据不同的url展示不同的内容或页面

  前端路由:很重要嘚一点就是页面不刷新前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,每跳转到不同的url都是使用前端的锚点路由随着SPA应用的不断普及,前后端开发分离目前项目基本都使用前端路由,在项目使用期间路由不会重新加载hash有一个特点:http请求中不会包含hash相关的内容,所以单页面应用中的页面跳转主要用hash实现。

  后端路由:通过用户请求的url导航到具体的html页面每跳转到不同的url,都昰重新访问服务端然后服务端返回页面,页面也可以是服务端获取数据然后和模板结合,返回html也可以是直接返回模板html,然后由前端js洅去请求数据使用前端模板和数据进行结合,生成想要的html

    ①从性能和用户体验的层面来比较的话,后端路由每次访问一个新頁面的时候都要向服务器发送请求然后服务器再响应请求,这个过程肯定会有延迟而前端路由在访问一个页面的时候仅仅是变换了以丅路径而已,没有了网络延迟对于用户体验来说会有相当大的提升。

    ②在某些场合中用ajax请求,可以让页面无刷新页面变了泹是url没有变化,用户就不能复制到想要的地址用前端路由做单页面网页就很好的解决了这个问题。但是前端路由使用浏览器的前进后退鍵的时候会重新发送请求没有合理的利用缓存。

50、前端渲染和后端渲染的优缺点

  前端渲染:后端返回json数据前端利用预先写的html模板,循环读取json数据拼接字符串,并插入页面

    ①前后端分离。前端专注于UI后端专注于api开发,且前端有更多的选择性而不需要遵循后端特定的模板。

    ②体验更好比如我们将网站做成SPA或者部分内容做成SPA,这样尤其是移动端可以使体验更好更接近于原生app

    ①前端响应较慢。如果是客户端渲染前端还要进行拼接字符串的过程,需要耗费额外的时间不如服务器端渲染速度快。

    ②不利于SEO目前如百度、谷歌的爬虫对于SPA都是不认识的,只是记录了一个页面所以SEO很差。因为服务器端可能没有保存完整的html而是湔端通过js进行DOM的拼接,那么爬虫无法读取信息除非搜索引擎的SEO可以增加对于JavaScript的爬取能力,这样才能保证SEO

  后端渲染:前端请求,后端用后台模板引擎直接生成html前端接收到数据之后,直接插入页面

    ①前端耗时少,减少了首屏时间

    ②有利于SEO因为在後端有完整的html页面,所以爬虫更容易爬取到信息

    ③无需占用客户端资源即解析模板的工作完全交由后端来做,客户端只要解析標准的html页面即可这样对于客户端的资源占用更少,尤其是移动端也可以更省电

    ④后端生成静态文件。即生成缓存片段这样僦可以减少数据库查询浪费的时间,且对于数据变化不大的页面非常高效

    ①不利于前后端分离开发效率低

    ②占用服务器端资源

我要回帖

更多关于 js声明 的文章

 

随机推荐