vue基础知识——进阶二

一、vue引入组件和方法的区别

- 引用组件：import  split   from '../../split/split.vue';
- 引用方法：import  {formatDate}   from '../../../common/js/data';

二、v-bind 和 v-on的区别

- v-bind是用于响应式的更新HTML       简写:  :herf=''
- v-on 是用于监听DOM事件的           简写:  @click=''

三、计算属性computed和方法methods的区别

同一函数定义为一个方法，或者是写在属性里面 得到的结果都是一样的。

不同的是：

- 计算属性：是基于他们的依赖进行缓存的，如果依赖的变量未发生改变，那么他不会重新求值
- 方法里面：只要触发重新渲染，总会执行函数

四、v-if 和 v-show的区别

- v-if :是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
- v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
- v-show 简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

五、v-for 循环json时，和 for in 循环json是一样的，有可能会改变他的顺序

v-for在遍历对象时，是按照Object.key()的结果遍历的，但是不能保证他的结果在不同的JavaScript引擎下是一致的

        {{index}}.{{key}}:{{value}}

data() {
  return {
      object:{
          '3':'第一'，
          '1':'第二'，
          '5':'第三'，
      }
 }
}

渲染结果

六、v-bind绑定class的时候，如果class有连接符-，要用''引起来

//也可以绑定一个变量，一个常量
 

七、vue不检测更新数组

不检测更新数组的情况.jpg

如何更新数组呢。官网： https://cn.vuejs.org/v2/guide/list.html

八、vm.$set 和 vue.set 的区别

vm.$set 实例方法，它只是全局 Vue.set 的别名

九、Prop是什么

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

十、Prop大小写建议

如果你是dom模板，那么需要使用：camelCase(驼峰命名)
props: [‘postTitle'],
在 HTML 中使用 kebab-case 的形式

• 如果是字符串模板，就无所谓了
• 子组件传给父组件的事件最好用 kebab-case(小写，中间-)

十一、dom模板和字符串模板

      dom模板就是原先就写在页面上的，能被浏览器识别的 html 结构，会在一加载就被浏览器渲染，所以要遵循 html 结构和标签命名，不然是不会被浏览器解析的，也就获取不到内容了，接着js获取 dom 节点的内容，就形成了 dom 模板。
      字符串模板可能原先放在服务器上啊，script标签里，js 的字符串里，原先不参与页面渲染的一串字符，所以呢 它可以不在乎 html 结构和标签命名，只要你最后根据模板生成内容的结构和命名正确就好。
      这两者其实区别就在于第一次获取到的方式不同，dom 模板参与浏览器解析，而字符串模板不参与，所以 dom 写起来要规范，而字符串模板不用。

十二、全局注册组件和局部注册组件

之前面试的时候有个面试官问到了这个问题

• 全局注册组件

如果想组件在任何地方都能应用，我们需要注册全局组件
如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。

全局注册组件.jpg

• 局部注册组件

components就是实现局部注册的属性

局部注册组件

十三、.sync修饰符的双向数据绑定

具体使用：https://blog.csdn.net/fabulous1111/article/details/79399696