黑马程序员技术交流社区

标题: 【广州校区】Vue.js的常见问题 [打印本页]

---

作者: 帅气de路人甲    时间: 2019-9-19 14:40
标题: 【广州校区】Vue.js的常见问题
1、响应式属性和方法
  每个Vue实例都会代理其data对象里所有的属性。
      var data={a:1}
      var vm=new Vue({data:data})   
      vm.a===data.a // -> true  设置属性也会影响到原始数据
      vm.a=2
      data.a        // -> 2     ... 反之亦然
      data.a=3
      vm.a          // -> 3
  即：都可以使vm.xxx这种方式获取和修改实例属性。
  注意：
    只有这些被代理的属性是响应的
    如果在实例创建之后添加新的属性到实例上，它不会触发视图更新
    那么这种情况的话，可以使用VueJs的vm.$xxx的方式来修改实例属性，这同样会触发视图更新，响应式的改变

2、生命周期钩子
  生命周期钩子包括created、beforeCompile、compiled、ready、beforeDestroy、destroyed
  钩子的this指向调用它的Vue实例
  我们可以在钩子的方法中使用this来指代当前实例。
  Vuejs中没有控制器的概念，组件的自定义逻辑可以分割在这些钩子里面

3、插值
  单词插值，只有在第一次渲染时候渲染值，之后不会随实例属性值的变化而改变
  插入原始HTML，这种方式内容以 HTML 字符串插入，数据绑定将被忽略
  如果需要复用模板片断，应当使用partials
  注意：
    在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS攻击

4、v-show 和 v-if的选择
  v-if：
    v-if是惰性的，如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）
  v-show：
    相比之下，v-show简单得多——元素始终被编译并保留，只是简单地基于css切换

6、prop数据绑定
  prop默认是单向绑定
    当父组件的属性变化时，将传导给子组件，但是反过来不会
    这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解
  解决办法：
    使用.sync或.once绑定修饰符显式地强制双向或单次绑定
  即：
    1.单向绑定（prop数据默认为单向绑定）
        <child :msg="parentMsg"></child>
    2.双向绑定
        <child :msg.sync="parentMsg"></child>
    3.单次绑定
        <child :msg.once="parentMsg"></child>

7、组件的父链
  子组件可以用this.$parent访问它的父组件
  根实例的后代可以用this.$root访问它
  父组件有一个数组this.$children，包含它所有的子元素

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2